schrullige Prozentsatz interpretation in webkit

Question

Arbeiten auf einem responsive design und nach und nach verlieren die Haare und schlafen Sie.Dies scheint wie eine echte webkit-bug: http://jsfiddle.net/TAvec/

Das problem ist ganz klar, es - webkit interpretiert die 20% - Polsterung als 20% der Eltern, die content-box, während firefox und opera interpretiert als 20% des übergeordneten Gesamt-box (einschließlich der Eltern, die Polsterung).

Irgendwelche Ideen, wie dies zu umgehen, unter Beibehaltung der absoluten Positionierung?

Answer 1

Sie können wrap die Inhalte von Ihrem <aside> in einem div und ordnen Sie die Polsterung an, dass, anstatt auf die <aside>.So können Sie sicherstellen, dass die Polsterung sowohl in FF und Chrome (noch nicht getestet O oder IE) macht in Bezug auf die container d.h., die <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;
}

Hier ist es in Aktion: http://jsfiddle.net/KYyR7/3/