webkit 中古怪的百分比解释答案

【问题标题】：quirky percentage interpretation in webkitwebkit 中古怪的百分比解释
【发布时间】：2012-03-08 10:06:11
【问题描述】：

致力于响应式设计并逐渐失去头发和睡眠。这似乎是一个真正的 webkit 错误：http://jsfiddle.net/TAvec/

那里的问题很明显 - webkit 将 20% 的填充解释为父内容框的 20%，而 Firefox 和 opera 将其解释为父内容框的 20%（包括父内容的填充）。

有什么想法可以在保持绝对定位的同时解决这个问题吗？

【问题讨论】：

标签： css google-chrome webkit padding percentage

【解决方案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/

【讨论】：