Interpretación porcentual peculiar en WebKit

Question

Trabajar en un diseño receptivo y perder gradualmente el cabello y el sueño. Este parece un error de WebKit genuino: http://jsfiddle.net/tavec/

El problema es bastante claro allí: WebKit interpreta el 20% de relleno como el 20% de la caja de contenido de los padres, mientras que Firefox y Opera lo interpretan como el 20% de la caja total de los padres (incluido el relleno de los padres).

¿Alguna idea de cómo trabajar en torno a esto mientras conserva el posicionamiento absoluto?

Answer 1

Puedes envolver el contenido de tu <aside> en un div y asignar el relleno a eso, en lugar de al <aside>. De esa manera, puede asegurarse de que el relleno en FF y Chrome (no haya probado O o IE) renders en relación con el contenedor, es decir, el <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;
}

Aquí está en acción: http://jsfiddle.net/kyyr7/3/