IE7 не понимает отображение: inline-block

Может кто-нибудь помочь мне разобраться с этой ошибкой? С Firefox он работает нормально, а с Internet Explorer 7 - нет. Кажется, не понять display: inline-block;,

HTML:

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

CSS:

.frame-header {
    height:25px;
    display:inline-block;   
}
Источник

4 ответа

Решение

IE7 display: inline-block; взломать так:

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

По умолчанию IE7 поддерживает только inline-block естественно inline elements ( Quirksmode Compatibility Table), так что этот хак вам нужен только для других элементов.

zoom: 1 есть, чтобы вызвать hasLayout поведение, и мы используем взломать свойство звезды для установки display в inline только в IE7 и ниже (более новые браузеры не будут применять это). hasLayout а также inline вместе будет в основном вызвать inline-block поведение в IE7, поэтому мы счастливы.

Этот CSS не будет проверять, и может в любом случае испортить вашу таблицу стилей, так что использование таблицы стилей только для IE7 с помощью условных комментариев может быть хорошей идеей.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
Источник

Обновить

Поскольку никто больше не использует IE6 и 7, я представлю другое решение:
Вам больше не нужен взлом, потому что IE8 поддерживает его сам

Для тех, кто должен поддерживать те браузеры каменного века до IE8 (не то, что IE8 такой старый, слишком кашель):
Для учета контроля версий IE используйте некоторый условный класс в <html>тег, как Пол Ирландский заявляет в своей статье

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

Таким образом, у вас будут разные классы в html-тегах для разных браузеров IE.

CSS вам нужен следующим образом

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

Это подтвердит, и вам не нужен дополнительный файл CSS

Старый ответ

.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 */
}
Источник

IE7 не поддерживает 'inline-block' должным образом, больше информации здесь: LINK
Использование может использовать: "встроенный" вместо.

Что именно вы пытаетесь достичь? Сделай нам пример и выложи сюда: http://jsfiddle.net/

Источник

Используйте inline, он работает с такими селекторами для элементов списка:

ul li {}

или быть конкретным:

ul[className or name of ID] li[className or name of ID] {}
Источник
Другие вопросы по тегам