WebKitでの風変わりな割合の解釈
-
26-10-2019 - |
質問
応答性の高いデザインに取り組み、徐々に髪と睡眠を失います。これは本物のWebKitのバグのように見えます: http://jsfiddle.net/tavec/
問題は非常に明確です - WebKitは20%のパディングを親のコンテンツボックスの20%として解釈し、FirefoxとOperaは親の合計ボックスの20%(親のパディングを含む)と解釈します。
絶対的なポジショニングを保持しながら、これを回避する方法はありますか?
解決
あなたのコンテンツを包むことができます <aside>
で div
そして、それにパディングを割り当てます <aside>
. 。そうすれば、FFとChromeの両方のパディング(OまたはIEをテストしていない)がコンテナ、つまり、IEに比べてレンダリングすることを確認できます。 <aside>
.
<!-- HTML -->
<article>
<h1>Parent</h1>
<p>Content...</p>
<aside>
<div class="content">
<h1>Aside child</h1>
<p>The prime minister also suggested the move would have implications for the UK's EU and Nato membership.</p>
</div>
</aside>
</article>
//CSS
article{
background:chocolate;
padding-left:40%;
position:relative;
}
aside{
background:chartreuse;
position:absolute;
left:0;top:0;bottom:0;
width:20%;
}
article div.content { //'%' declarations relative to parent
width: 100%;
height: 100%;
padding: 20%;
border:20px solid black;
background-color: #fff;
}
ここで動作しています: http://jsfiddle.net/kyyr7/3/
所属していません StackOverflow