webkit 中奇怪的百分比解释

发布于 2025-01-06 00:46:51 字数 257 浏览 0 评论 0原文

致力于响应式设计并逐渐失去头发和睡眠。这看起来像是一个真正的 webkit bug： http://jsfiddle.net/TAvec/

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绿萝 2025-01-13 00:46:51

您可以将

的内容包装在 div 中，并将填充分配给它，而不是分配给

。这样您就可以确保 FF 和 Chrome（尚未测试 O 或 IE）中的填充相对于容器（即

）进行渲染。

<!--  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/

You can wrap the content of your <aside> in a div and assign the padding to that, rather than to the <aside>. That way you can ensure that the padding in both FF and Chrome (haven't tested O or IE) renders relative to the container i.e., the <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;
}

Here it is in action: http://jsfiddle.net/KYyR7/3/

回复收藏 0 原文

~没有更多了~