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

127

Может кто-нибудь помочь мне разобраться в этой ошибке? С Firefox он работает нормально, но с Internet Explorer 7 - нет. Вроде не понимаю 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
источник

1

Чего именно вам добиться? Какой эффект?

— Iladarsda 01

302

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

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

— капа
источник

40

Я предпочитаю *zoom:1;запускать hasLayout. Так что более ясно, что они *zoomи *displayидут вместе

— yunzen

4

@RoshanWijesena w3schools не имеет ничего общего с w3c, как и власти на ie7

— Муса

1

@RoshanWijesena w3schools не является хорошим ресурсом и вообще не является официальным. Не полагайтесь на это. То, что они упоминают или не упоминают что-то, на самом деле ничего не значит.

— капа

1

Спасибо, парни! так что я должен использовать в качестве официальной документации, просто интересно!

— Рошан Виджесена

2

@RoshanWijesena Официальные стандартные спецификации можно найти на w3.org , официальной странице W3C. developer.mozilla.org - отличный ресурс, который можно использовать вместо w3schools в качестве справочника.

— капа

8

Обновить

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

— yunzen
источник

CSS, который вы показываете выше, имеет смысл, но как именно он будет работать в HTML? Спасибо.

— StephenESC

@StephenESC двумя способами. Добавьте класс inline-blockк frame-headerэлементу. Или изменить с inline-blockпомощью frame-headerв CSS селекторов.

— yunzen

1

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

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

— Iladarsda
источник

0

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

ul li {}

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

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

— MiddleKay
источник

2

inlineне то же самое, что inline-block. Например, height: 25px;в примере не вступит в силу, если элемент есть inline. Также вопрос ничего не говорит о списках.

— капа