Elemento figlio di larghezza percentuale nell'elemento padre posizionato in modo assoluto su Internet Explorer 7

Ho un posizionamento assoluto divcontenente diversi bambini, uno dei quali è relativamente posizionato div. Quando uso a percentage-based widthsul bambino div, si riduce a 0 widthIE7, ma non su Firefox o Safari.

Se uso pixel width, funziona. Se il genitore è relativamente posizionato, la larghezza percentuale sul figlio funziona.

1. C'è qualcosa che mi manca qui?
2. C'è una soluzione semplice per questo oltre a quella pixel-based widthsul bambino?
3. Esiste un'area delle specifiche CSS che copre questo?

Il genitore divdeve avere un valore definito width, in pixel o in percentuale. In Internet Explorer 7, il genitore ha divbisogno di un valore definito widthaffinché le percentuali di figlio divs funzionino correttamente.

Ecco qualche codice di esempio. Penso che questo sia quello che stai cercando. Di seguito 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 di 8 ha un aspetto temporale nel suo modello a scatola che in particolare crea un problema con larghezze basate su percentuale. Nel tuo caso qui un posizionamento assoluto divdi default non ha larghezza. La sua larghezza verrà elaborata in base alla larghezza dei pixel del suo contenuto e verrà calcolata dopo il rendering del contenuto. Quindi, al momento, IE incontra e rende il tuo divgenitore relativamente posizionato ha una larghezza di 0, quindi perché crolla da solo a 0.

Se desideri una discussione più approfondita di questo insieme a molti esempi di lavoro, dai un'occhiata qui .

Perché la larghezza percentuale figlio nel genitore posizionato in modo assoluto non funziona in IE7?

Perché è Internet Explorer

C'è qualcosa che mi manca qui?

Cioè, per aumentare la consapevolezza del tuo collega / cliente che IE fa schifo.

Esiste una soluzione semplice oltre alla larghezza in pixel del bambino?

Usa le emunità in quanto sono più utili durante la creazione di layout liquidi in quanto puoi utilizzarli per il riempimento, i margini e le dimensioni dei caratteri. Quindi il tuo spazio bianco cresce e si riduce in proporzione al testo se viene ridimensionato (che è davvero quello che ti serve). Non credo che le percentuali offrano un controllo più preciso di quelle ems; non c'è nulla che ti impedisca di specificare in centesimi di em (0,01 em) e il browser interpreterà come meglio ritiene.

Esiste un'area delle specifiche CSS che copre questo?

Nessuno, per quanto mi ricordo di em'e%', erano destinati solo per le dimensioni dei caratteri a CSS 1.0.

Penso che questo abbia qualcosa a che fare con il modo in cui la hasLayoutproprietà è 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 funzionare in modalità IE7.

È divnecessario avere una larghezza definita:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>