采用响应式设计,逐渐脱发和失眠。这似乎是一个真正的webkit错误:http://jsfiddle.net/TAvec/
问题很明显——webkit将20%的填充解释为父内容框的20%,而firefox和opera将其解释为父总框的20%(包括父内容框)。
有什么想法可以在保持绝对定位的同时解决这个问题吗?
您可以将<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/