eccentrico interpretazione percentuale webkit

Question

di lavoro su un responsive design e perdendo a poco a poco i capelli e il sonno. Questo mi sembra un vero e proprio bug webkit: http://jsfiddle.net/TAvec/

Il problema è abbastanza chiara lì -. Interpreta WebKit l'imbottitura 20% al 20% della scatola soddisfatta del genitore, mentre Firefox e Opera lo interpretano come il 20% della scatola totale del genitore (inclusi padding del genitore)

Tutte le idee su come risolvere questo pur mantenendo il posizionamento assoluto?

Answer 1

Si può avvolgere il contenuto del tuo <aside> in un div e assegnare l'imbottitura a questo, piuttosto che al <aside>. In questo modo è possibile garantire che l'imbottitura sia in FF e Chrome (non ho ancora testato O o IE) rende rispetto al contenitore vale a dire, il <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;
}

Qui è in azione: http://jsfiddle.net/KYyR7/3/