excentrique interprétation de pourcentage webkit

Question

de travail sur une conception adaptée et perdre progressivement les cheveux et le sommeil. Celui-ci semble être un bug véritable webkit: http://jsfiddle.net/TAvec/

Le problème est clair tout à fait là -. WebKit interprète le rembourrage de 20% à 20% de la boîte contenu du parent, alors que Firefox et Opera interprètent comme 20% de la boîte totale du parent (y compris le rembourrage du parent)

Toutes les idées comment travailler autour de ce tout en conservant le positionnement absolu?

Answer 1

Vous pouvez envelopper le contenu de votre <aside> dans un div et affecter le rembourrage à cela, plutôt qu'à la <aside>. De cette façon, vous pouvez vous assurer que le rembourrage dans les deux FF et Chrome (ont pas testé O ou IE) rend par rapport au récipient à savoir le <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;
}

Ici, il est en action: http://jsfiddle.net/KYyR7/3/