IE7 не понимает отображение: встроенный блок

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

HTML:

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

CSS

.frame-header {
    height:25px;
    display:inline-block;   
}

Ответ 1

Взлом IE7 display: inline-block; выглядит следующим образом:

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

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

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]–->

Ответ 2

Update

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

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

<!--[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 */
}

Ответ 3

IE7 не поддерживает "встроенный блок" правильно, подробнее здесь: ССЫЛКА
Использование может использовать: 'inline' вместо этого.

Чего именно вы пытаетесь достичь? Приведите пример и поставьте здесь: http://jsfiddle.net/

Ответ 4

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

ul li {}

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

ul[className or name of ID] li[className or name of ID] {}