在webkit中进行奇特的百分比解释 [英] quirky percentage interpretation in webkit

问题描述

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

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

任何想法如何在保留绝对位置的情况下解决这个问题？

解决方案

您可以将< aside> 的内容封装在 div 中，并指定填充而不是< aside> 。通过这种方式，您可以确保FF和Chrome中的填充（未测试O或IE）相对于容器呈现，即< aside> 。

 <！ -  HTML  - > 
<文章> 
< h1>父< / h1> 
< p>内容...< / p> 
 
< aside> 
< div class =content> 
< h1> Aside child< / h1> 
< p>总理也表示，此举将对英国的欧盟和北约成员国产生影响。< / p> 
< / div> 
< / aside> 
< / article> 
 
 
 // CSS 
文章{
背景：巧克力; 
 padding-left：40％; 
职位：亲属; 
} 
在外{
 background：chartreuse; 
位置：绝对; 
 left：0; top：0; bottom：0; 
 width：20％; 
} 
 
文章div.content {//'％'相对于父母的声明
 width：100％; 
身高：100％; 
填充：20％; 
 border：20px纯黑色; 
 background-color：#fff; 
} 
  

这是行动： http://jsfiddle.net/KYyR7/3/

Working on a responsive design and gradually losing hair and sleep. This one seems like a genuine webkit bug: http://jsfiddle.net/TAvec/

The problem is quite clear there - webkit interprets the 20% padding as 20% of the parent's content box, while firefox and opera interpret it as 20% of the parent's total box (including the parent's padding).

Any ideas how to work around this whilst retaining the absolute positioning?

解决方案

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/

这篇关于在webkit中进行奇特的百分比解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！