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

StackOverflow https://stackoverflow.com/questions/6

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.

  1. C'è qualcosa che mi manca qui?
  2. Esiste una soluzione semplice per questo oltre a larghezza basata sui pixel sul bambino?
  3. Esiste un'area delle specifiche CSS che copre questo aspetto?
È stato utile?

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 divAiuta 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 eme % 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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top