2012-03-20 15 views
13

Moje pytanie jest podobne do IFRAME and conflicting absolute positions, ale chcę wiedzieć, DLACZEGO nie można ustawić lewej/prawej lub górnej/dolnej w elemencie iframe i zmusić go do działania.dlaczego nie można użyć pozycjonowania bezwzględnego iframe do ustawienia wysokości/szerokości

<!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> 

Element div pobiera pełną wysokość przeglądarki. Element iframe ma 150 pikseli wysokości. Tak samo jest w Chrome 17, Firefox 11 i IE9. Oczywiście nie jest to dziwactwo przeglądarki. W specyfikacji HTML5 jest coś, co mówi, że nie możesz ustawić lewej/prawej lub górnej/dolnej ramki iframe w celu ustawienia wysokości.

Co jest specjalnego w elementach iframe (vs. divs)?

Odpowiedz

19

Iframes to "replaced elements".

Są one traktowane inaczej niż elementy niezastępowane. Nie wdając się w szczegóły, wystarczy spojrzeć na spec Spis treści: http://www.w3.org/TR/CSS21/visudet.html

10,3 Obliczanie szerokości i marginesów
10.3.1 Inline, non-zastąpione elementami
10.3.2 Inline, zastąpione elementami
10,3 0,3 blokowe, to nie otrzymuje elementy normalnym
10.3.4 blokowe, zastąpione elementami w normalnym
10.3.5 panelowe elementy wykonane otrzymuje
10.3.6 pływających, otrzymuje elementy
10.3.7 Oczywiście umieszczone, nie-zastąpione elementami // Div
10.3.8 Oczywiście umieszczone zastąpiony elementami // iframe
10.3.9 'Inline blok', to nie otrzymuje elementy normalnym
10.3.10 "Blok śródliniowy", wymienione elementy w normalnym przepływie

23

Po prostu się nie uda. Jest to sposób tworzenia iFrame.

Jeśli nadal chcesz osiągnąć to samo rozwiązanie, użyj div jako opakowania z pozycją absolutną, z góry, z lewej, z prawej iz dołu. Umieść w tym dziale szerokość iFrame: 100% i wysokość: 100%.

Problem rozwiązany.

+0

To nie odpowiada na pytanie, OP nie szukał rozwiązania problemu, raczej wyjaśnienie, dlaczego element iframe nie może być ustawionym absolutnie. –

Powiązane problemy