Webkitで変わったパーセンテージの解釈

Question

レスポンシブなデザインで作業し、徐々に髪の毛を失い、眠ります。 http://jsfiddle.net/TAvec/

Webkitは20％のパディングを親のコンテンツボックスの20％と解釈し、Firefoxとオペラはそれを親の合計ボックスの20％と解釈します（親のパディングを含む）。

絶対的な位置を保持しながらこれを回避する方法はありますか？

Answer 1

<aside>の内容をdivにラップし、<aside>ではなくパディングを割り当てることができます。そうすれば、FFとChrome（Oや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/