2012-03-20 11 views
13

La mia domanda è simile a IFRAME and conflicting absolute positions, ma in particolare voglio sapere PERCHÉ non è possibile impostare sia la sinistra/destra o superiore/inferiore in un iframe e farlo funzionare.perché non è possibile utilizzare il posizionamento assoluto di iframe per impostare l'altezza/larghezza

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
iframe { position: absolute; display: block; top: 0; bottom: 0; left: 10px; width:100px; border: 1px solid black;} 
div { position: absolute; display: block; top: 0; bottom: 0; left: 200px; width:100px; border: 1px solid black;} 
</style> 
</head> 
<body> 
<iframe></iframe> 
<div></div> 
</body> 
</html> 

Il div occupa l'intera altezza del browser. L'iframe è alto 150 px. È lo stesso in Chrome 17, Firefox 11 e IE9. Chiaramente questa non è una stranezza del browser. C'è qualcosa nelle specifiche HTML5 che dice che non è possibile impostare sia a sinistra/a destra o in alto/in basso su un iframe per impostare l'altezza.

Cos'è speciale su iframes (vs divs)?

risposta

19

Gli iframe sono "replaced elements".

Questi sono trattati in modo diverso rispetto agli elementi non sostituiti. Elementi http://www.w3.org/TR/CSS21/visudet.html

10,3 Calcolo larghezze e margini
10.3.1 Elementi in riga non-rimpiazzati
10.3.2 Inline, sostituiti
10.3: Senza entrare nei dettagli, basta guardare al tavolo della spec dei contenuti .3 a livello di blocco, elementi non sostituito nel flusso normale
10.3.4 a livello di blocco, elementi sostituita nel flusso normale
10.3.5 galleggiante, elementi non sostituito
10.3.6 galleggiante, elementi sostituito
10.3.7 posizionati in modo assoluto, elementi non sostituito // div
10.3.8 posizionati in modo assoluto, sostituiti elementi // iframe
10.3.9 'Inline-block', elementi non sostituito nel flusso normale
10.3.10 'inline-block', gli elementi nel flusso normale

23

Non funzionerà. È il modo in cui è realizzato l'iFrame.

Se si desidera comunque raggiungere la stessa soluzione, utilizzare un div come wrapper con posizione assoluta, superiore, sinistro, destro, inferiore. Inserisci in questa div la larghezza della larghezza iFrame: 100% e altezza: 100%.

Problema risolto.

+0

questo non risponde alla domanda, OP non era alla ricerca di una soluzione al problema, piuttosto una spiegazione del motivo per cui ha sostituito un iframe non può essere posizionato assolutamente –

Problemi correlati