Ustawienie max wysokość div nie działa

Mam ten prosty HTMLUstawienie max wysokość div nie działa

<html> 
<head> 
    <style> 
    </style> 
</head> 
<body> 
<div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface"> 
    <div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"></div> 
    <div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"></div> 
</div> 
</body> 
</html>

Istnieją dwa div s: jeden "horyzontalne" (wysokość 2px) i jeden "pionowe" (wysokość 2px).

Kiedy przeglądam strony w Firefox:

enter image description here

natomiast na IE (8) Coś weired dzieje:

enter image description here

górna DIV nie jest 2px wysokie.

Każdy pomysł, dlaczego tak się dzieje?

Źródło

2012-11-11 Majid Laissi

Oto szybki [jsFiddle] (http://jsfiddle.net/pqps5/1 /). IE9 jest w porządku. – kapa

@ bažmegakapa Próbowałem skonfigurować jsfiddle my self i było w porządku nawet w IE 8, dlatego musiałem zrobić printscreen. Czy możesz spróbować umieścić mój kod w pliku .html i sprawdzić, czy to też jest zachowane w twoim IE? (nie używając jsfiddle). –

, podobnie jak IE7 ... może po prostu trzeba dodać 'display: block'? – JFK

Twoje możliwych rozwiązań:

1). Dodaj display: block do stylu

2). sprawdź, czy masz właściwy tryb dziwności (IE), który spowoduje nieoczekiwany format i wyniki. Check this article for reference

Źródło

2012-11-12 00:04:07 JFK

I podejrzewam, że będzie IE addding pewne „pomocne” Ustawienia w trybie quirks że popycha wysokość pojemnika do minimalnej wysokości tekstu. Spróbuj ustawić line-height: 2px; dla IE8 i niższą (komentarze warunkowe, być może?), Które powinny je posortować.

Źródło

2012-11-11 23:54:45

tak, ale to nie wyjaśnia, dlaczego byłem w stanie zobaczyć że w jsfiddle, ale nie w moim prostym HTML, rozwiązanie @Tyzoid dotyczy całego mojego kodu –

IE7, 8 i 9 działa dobrze tutaj.

Nie potrzebujesz naprawdę max-height, ale ustawienie display: block i/lub line-height: 2px może być rozwiązaniem.

Źródło

2012-11-11 23:55:58 Behrens

tak, ale to nie wyjaśnia, dlaczego byłem w stanie to zobaczyć w jsfiddle, ale nie w moim prostym HTML, rozwiązanie @Tyzoid dotyczy całego mojego kodu –

Twój problem wydaje się wynikać z trybu IE quirks mode.

Występuje, gdy nie ma deklaracji dokumentu. Maksymalna wysokość, między innymi (w tym model pudełkowy) działa tak, jakby była to 5. Prostym rozwiązaniem jest dodanie deklaracji DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Źródło

2012-11-11 23:58:37 Tyzoid

Dziękuję człowieku, że to zrobił! –

@jidma: cóż, mówiłem ci – JFK

W moim przypadku nie było

min-height

ustawienie, które zastępują inne ustawienia

Źródło

2017-10-18 11:08:31

Ustawienie max wysokość div nie działa

Odpowiedz

Powiązane problemy