eccentrico interpretazione percentuale webkit
-
26-10-2019 - |
Domanda
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?
Soluzione
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/