IE7 nie rozumie display: inline-block

Czy ktoś może mi pomóc ogarnąć ten błąd? Z Firefox jego działa dobrze, ale z Internet Explorer 7 jego 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;   
}
Author: kapa, 2011-07-01
Source

4 answers

IE7 display: inline-block; hack jest następujący: 

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

Domyślnie IE7 obsługuje tylko inline-block na naturalnie inline elementach ( Tabela kompatybilności z Quirksmode ), więc potrzebujesz tego hacka tylko dla innych elementów.

zoom: 1 czy istnieje wyzwalanie hasLayout zachowanie, i używamy właściwości star hack do Ustawienia display na inline tylko w IE7 i niższych (nowsze przeglądarki tego nie zastosują). hasLayout i inline razem w zasadzie wywołają inline-block zachowanie w IE7, więc jesteśmy szczęśliwi.

Ten CSS nie będzie sprawdzał poprawności i może sprawić, że Twój arkusz stylów i tak się zepsuje, więc używanie arkusza stylów tylko dla IE7 poprzez komentarze warunkowe może być dobrym pomysłem.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
 300
Author: kapa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-22 08:49:07

Update

Ponieważ nikt już nie używa IE6 i 7 przedstawię inne rozwiązanie:
nie potrzebujesz już hakera, ponieważ IE8 obsługuje go sam

Dla tych, którzy muszą obsługiwać przeglądarki z epoki kamiennej przed IE8 (nie chodzi o to, że IE8 też jest taki stary ):
Dla kontroli wersji IE, użyj jakiejś warunkowej klasy w znaczniku <html>, np. Paul Irish stwierdza w jego 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]-->

By to będzie 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;
}

To potwierdzi 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 */
}
 8
Author: HerrSerker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-25 10:26:25

IE7 nie obsługuje poprawnie 'inline-block', więcej informacji tutaj: LINK
Use może zamiast tego użyć: 'inline'.

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

 1
Author: Iladarsda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-01 07:29:18

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

ul li {}

Lub konkretnie: 

ul[className or name of ID] li[className or name of ID] {}
 0
Author: MiddleKay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-14 05:32:53