Elemento figlio con larghezza percentuale nell'elemento padre posizionato in modo assoluto su Internet Explorer 7
-
08-06-2019 - |
Domanda
Ho un posizionamento assoluto div
contenente diversi bambini, uno dei quali è relativamente posizionato div
.Quando utilizzo a larghezza basata sulla percentuale sul bambino div
, si comprime fino a raggiungere la larghezza "0". Internet Explorer 7, ma non su Firefox o Safari.
Se uso larghezza dei pixel, funziona.Se il genitore è posizionato relativamente, la larghezza percentuale sul figlio funziona.
- C'è qualcosa che mi manca qui?
- Esiste una soluzione semplice per questo oltre a larghezza basata sui pixel sul bambino?
- Esiste un'area delle specifiche CSS che copre questo aspetto?
Soluzione
Il genitore div
deve avere una definizione width
, in pixel o in percentuale.In Internet Explorer 7, il genitore div
necessita di una definizione width
per la percentuale dei bambini div
Aiuta a funzionare correttamente.
Altri suggerimenti
Ecco qualche codice di esempio.Penso che questo sia quello che stai cercando.Quanto segue viene visualizzato esattamente lo stesso in Firefox 3 (mac) e IE7.
#absdiv {
position: absolute;
left: 100px;
top: 100px;
width: 80%;
height: 60%;
background: #999;
}
#pctchild {
width: 60%;
height: 40%;
background: #CCC;
}
#reldiv {
position: relative;
left: 20px;
top: 20px;
height: 25px;
width: 40%;
background: red;
}
<div id="absdiv">
<div id="reldiv"></div>
<div id="pctchild"></div>
</div>
IE prima della versione 8 ha un aspetto temporale nel suo modello box che crea in particolare un problema con le larghezze basate sulla percentuale.Nel tuo caso qui è assolutamente posizionato div
per impostazione predefinita non ha larghezza.La sua larghezza verrà calcolata in base alla larghezza in pixel del suo contenuto e verrà calcolata dopo il rendering dei contenuti.Quindi a quel punto IE incontra e rende la tua posizione relativa div
il suo genitore ha una larghezza pari a 0, ecco perché collassa a 0.
Se desideri una discussione più approfondita su questo argomento insieme a molti esempi funzionanti, dai un'occhiata Qui.
Perché il bambino della larghezza percentuale non lavora in Parenged Parent in IE7?
Perché è Internet Exploder
C'è qualcosa che mi manca qui?
Cioè, per aumentare la consapevolezza dei tuoi colleghi / clienti che IE fa schifo.
Esiste una soluzione semplice oltre alla larghezza basata sui pixel sul bambino?
Utilizzo em
unità poiché sono più utili quando si creano layout liquidi poiché è possibile utilizzarli per la spaziatura interna, i margini e le dimensioni dei caratteri.Quindi il tuo spazio bianco cresce e si riduce proporzionalmente al tuo testo se viene ridimensionato (che è davvero ciò di cui hai bisogno).Non penso che le percentuali diano un controllo più preciso di quello ems;non c'è nulla che ti impedisca di specificare in centesimi di em (0,01 em) e il browser interpreterà come meglio crede.
Esiste un'area delle specifiche CSS che copre questo aspetto?
Nessuno, per quanto ricordo em
e % erano destinati solo alle dimensioni dei caratteri nei CSS 1.0.
Penso che questo abbia qualcosa a che fare con il modo in cui hasLayout
La proprietà è implementata nel browser precedente.
Hai provato il tuo codice in IE8 per vedere se funziona anche lì?IE8 ha un debugger (F12) e può anche essere eseguito in modalità IE7.
IL div
deve avere una larghezza definita:
<div id="parent" style="width:230px;">
<div id="child1"></div>
<div id="child2"></div>
</div>