IE CSS display: inline-block Rendering problem

Mam denerwujący problem renderowania z IE mój kod jestIE CSS display: inline-block Rendering problem

CSS:

div { 
    display: inline-block; 
    margin-right:40px; 
    border: 1px solid; 
}

HTML:

<div>element</div> 
<div>element</div> 
<div>element</div> 
<div>element</div> 
<div>element</div>

Jest jak to wygląda w firefox/chrome (oczekiwany ekran)

enter image description here

Jak to wygląda w IE

enter image description here

google jeśli IE obsługuje display: inline-block, i najwyraźniej robi.

Źródło

2012-01-01 AlanFoster

Wersja IE? Włączono tryb zgodności? –

Dodaj do DOCTYPE html,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To działa na mnie po dodaniu tego.

Uwaga: w jsFiddle DOCTYPE został automatycznie wygenerowany, aby działał.

Edit 1: Sprawdź this uzyskać więcej informacji,

Edit 2: Możesz przeczytać więcej o inline-block stylizacji here

Źródło

2012-01-01 06:00:35

IE7 nie obsługuje 'display: inline-block' na elementach, które są domyślny poziom bloku, który jestem prawie pewien jest niezależnie od zadeklarowanego doctype? – justis

Możesz użyć właściwości hasLayout, aby działała w IE 7. Będę edytować mój wpis z większą ilością informacji. –

Rozwiązanie robocza

Poniższy wydaje się działać prawidłowo w:

osobliwości trybie
IE 7 Standardy
IE 8 Standardy
IE 9 Standardów
IE 9 Tryb zgodności

<!DOCTYPE html> 
<html> 
<head> 
    <style> 

    DIV { 
     display: inline-block; 
     *display: inline; /* leading asterisk IS correct */ 
     margin-right:40px; 
     border: 1px solid; 
     zoom: 1; /* seems to fix drawing bug on border in IE 7 */ 
    } 

    </style> 

</head> 
<body> 
    <div>element</div> 
    <div>element</div> 
    <div>element</div> 
    <div>element</div> 
    <div>element</div> 
</body> 
</html>

Odpowiedź Historia

http://jsfiddle.net/3sK4S/

działa dobrze dla mnie w IE9 trybie standardowym. Nie wyświetla się poprawnie (zgodnie z opisem) w trybie dziwactwa.

Testy z IE9:

Quirks Tryb: blok (zła)
IE 7 Standardy: blok (zła)
IE 8 Standardy: inline (poprawne)
IE 9 Standardy: wbudowany (poprawne)
9 trybu zgodności IE: inline (poprawne)

oszukać IE7:

div { 
    display: inline-block; 
    *display: inline; /* leading asterisk IS correct */ 
    margin-right:40px; 
    border: 1px solid; 
}

Zrobione z this article. Działa dla mnie w trybie emulacji IE 7.

Komentarz na temat @ DKS na temat doctype, dodałem kompletne rozwiązanie z określonym typem dokumentu.

Źródło

2012-01-01 05:56:09

To interesująca rzecz do zapamiętania. Nie zdawałem sobie sprawy, że domyślnie jest to tryb dziwactwa ... To denerwujące. Czy istnieje sposób, aby działał w trybie dziwactwa? – AlanFoster

@AlanFoster - Opublikowany przeze mnie hack IE7 wydaje się to naprawiać: http://jsfiddle.net/3sK4S/1/ –

@AlanFoster Możesz użyć " 'meta w twoim nagłówku, aby uruchomić IE przy użyciu najwyższego dostępnego silnika renderującego, zamiast uciekać się do trybu zgodności itp. Chociaż IE7 nadal zachowuje się tak, jak teraz, więc prawdopodobnie nadal chce mieć ten hack w miejscu. – justis

div { 
    display: block; 
    margin-right: 40px; 
    float: left; 
    border: 1px solid; 
}

Problem dotyczy tylko wersji IE7 lub wcześniejszej, ale to rozwiąże problem.

Źródło

2012-01-01 05:59:03

Demo: http://jsfiddle.net/fgywq/ Spróbuj z każdą przeglądarką .. –

Jest to zgodne z prawem rozwiązanie, ale zdarzają się sytuacje, w których nie chcesz przenosić elementów. Obsługa 'inline-block' znacznie ułatwiła tworzenie układów CSS. –

Tak, ale kiedy przeglądarki takie jak IE7, trzeba robić takie rzeczy ... chociaż szczerze mówiąc moja firma nie sprawdza np. <8 .. –

-1

display: inline;

zoom: 1;

działało dobrze

Źródło

2012-04-02 11:57:49 Serkan

Są hacki CSS dla IE, który działa, ale jest sporo z nich:

hasLayout
```
hasLayout: true;
```
--- Podobno zmusza IE7 (?) rendering zgodnie z zasadami układu CSS dla elementu zamiast globalnych reguł
* dis grać
```
*display: inline; 
zoom: 1; 
```
- hack gwiazda, którą widocznie "sztuczki" silnik renderowania do linii DIV jako elementy inline
pływak
```
float:left;
```
- Stary dobry pływak , nawet IE6 powinien to wspierać, ale nie wiem, dlaczego powinieneś się martwić o IE6, chociaż chińskie statystyki przeglądarek zdają się wskazywać, że IE6 jest nadal dość popularne w Chinach, ale to może być już historia, ponieważ ja przeczytaj to trochę w zeszłym roku. Osobiście uważam, że Korea Północna nie powinna się martwić, ale to tylko ja.

Istnieje jednak inny sposób na uniknięcie tych wszystkich hacków na rzecz projektu internetowego kodu Google o nazwie HTML Shim lub Shiv. Celem tego jest stworzenie wszystkich wersji IE przed wersją 9, aby obsługiwać HTML5. Zauważyłem, że to pomaga i nie muszę używać wszystkich powyższych, aby uruchomić blok inline. Jest to ważne tylko, jeśli nie masz nic przeciwko dodaniu JavaScript. Z drugiej strony, kto ma obecnie bez JS?

Oczywiście istnieje również tryb dziwności (kompatybilność) lub tryby standardowe, dlatego warto dodać poprawny typ dokumentu, aby rozpocząć.W przypadku HTML5 jest to prostsze:

<?DOCTYPE html>

(?) Nie jestem pewien, która wersja, ale myślę, że przeczytałem 7 w trybie dziwactwa.

Źródło

2013-05-14 16:58:11

Dla mnie pracował dodając ten kod:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

do nagłówka informacji.

Źródło

2015-10-12 06:04:31 maycza

IE CSS display: inline-block Rendering problem

Odpowiedz

Powiązane problemy