IE7 не понимает отображение: inline-block - PullRequest
Новая
       11

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

128 голосов
/ 01 июля 2011

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

HTML: 

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

CSS: 

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

Ответы [ 4 ]

302 голосов
/ 01 июля 2011

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

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

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

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

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

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
8 голосов
/ 28 сентября 2011

Обновление

Поскольку никто больше не использует 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 */
}
1 голос
/ 01 июля 2011

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

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

0 голосов
/ 14 марта 2013

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

ul li {}

или, если быть точным: 

ul[className or name of ID] li[className or name of ID] {}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...