webkit中奇特的百分比解釋

Question

處理響應式設計並逐漸失去頭髮和睡眠。這一個看起來像一個真正的WebKit錯誤：http://jsfiddle.net/TAvec/

問題是很清楚的有 - WebKit的解釋20％的間隔，作爲父母的內容框的20％，而Firefox和Opera將它解釋爲父母的總票房的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/