IE7 nie obsługuje wyświetlania: inline-block

126

Czy ktoś może mi pomóc w obejściu tego błędu? Z Firefoksem działa dobrze, ale z Internet Explorerem 7 nie. Wydaje się, że nie rozumie display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}
html internet-explorer-7 css lanthuong
źródło
1
Co dokładnie chcesz osiągnąć? Jaki efekt?
Iladarsda

Odpowiedzi:

301

display: inline-block;Hack do IE7 wygląda następująco:

display: inline-block;
*display: inline;
zoom: 1;

Domyślnie IE7 obsługuje tylko elementy inline-blocknaturalne inline( tabela zgodności Quirksmode ), więc potrzebujesz tego hacka tylko dla innych elementów.

zoom: 1Jest tam do wyzwalania hasLayoutzachowań i używamy gwiazdkowym siekać na ustawienie displaysię inlinetylko w IE7 i niższych (nowszych przeglądarek, które nie będą miały zastosowania). hasLayouti inlinerazem będą w zasadzie wywoływać inline-blockzachowanie w IE7, więc jesteśmy szczęśliwi.

Ten kod CSS nie będzie weryfikował poprawności i może spowodować, że arkusz stylów i tak będzie zepsuty, więc użycie arkusza stylów tylko dla IE7 poprzez warunkowe komentarze może być dobrym pomysłem.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
kapa
źródło
40
Wolę *zoom:1;triger hasLayout. Więc jest wyraźniej, że *zoomi *displayidą razem
yunzen
4
@RoshanWijesena w3schools nie ma nic wspólnego z w3c, podobnie jak autorytety w ie7
Musa
1
@RoshanWijesena w3schools nie jest dobrym źródłem informacji i wcale nie jest oficjalne. Nie polegaj na tym. Fakt, że coś wspominają lub nie wspominają, tak naprawdę nic nie znaczy.
kapa
1
dzięki chłopaki! więc co powinienem użyć jako oficjalnej dokumentacji, po prostu się zastanawiam!
Roshan Wijesena
2
@RoshanWijesena Możesz znaleźć oficjalne standardowe specyfikacje na w3.org , oficjalnej stronie W3C. developer.mozilla.org to świetne źródło, którego możesz użyć zamiast w3schools jako źródła.
kapa
8

Aktualizacja

Ponieważ nikt już nie korzysta z IE6 i 7, przedstawię inne rozwiązanie:
nie potrzebujesz już hacka, bo IE8 sam go obsługuje

Dla tych, którzy muszą obsługiwać te przeglądarki z epoki kamienia przed IE8 (nie chodzi o to, że IE8 jest taki stary, zbyt kaszlący ):
w celu omówienia kontroli wersji w IE użyj <html>tagu klasy warunkowej, tak jak stwierdza Paul Irish w swoim artykule

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

Dzięki temu będziesz mieć różne klasy w znaczniku html dla różnych przeglądarek IE

CSS, którego potrzebujesz, jest następujący

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

Spowoduje to sprawdzenie poprawności i nie potrzebujesz dodatkowego pliku CSS

Stara odpowiedź

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
yunzen
źródło
CSS, który pokazałeś powyżej, ma sens, ale jak dokładnie miałoby to działać w HTML? Dzięki.
StephenESC
@StephenESC na dwa sposoby. Dodaj klasę inline-blockdo frame-headerelementu. Lub zmień inline-blockje frame-headerw selektorach CSS.
yunzen
1

IE7 nie obsługuje poprawnie „inline-block”, więcej informacji tutaj: LINK
Użyj zamiast tego: „inline”.

Co dokładnie próbujesz osiągnąć? Zrób nam przykład i umieść tutaj: http://jsfiddle.net/

Iladarsda
źródło
0

użyj inline, działa z tego rodzaju selektorami dla elementów listy:

ul li {}

a konkretnie:

ul[className or name of ID] li[className or name of ID] {}
MiddleKay
źródło
2
inlineto nie to samo co inline-block. Na przykład, height: 25px;w przykładzie nie zadziała, gdy element jest inline. Pytanie nie mówi też nic o listach.
kapa