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

302

Злом 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]–->

— капа
джерело

40

Я віддаю перевагу *zoom:1;тригеру hasLayout. Тож ясніше, що *zoomі *displayйти разом

— юнзен

4

@RoshanWijesena w3schools не має нічого спільного з w3c і не є владою в ie7

— Musa

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

— юнзен
джерело

CSS, який ви показуєте вище, має сенс, але як саме це буде працювати в HTML? Дякую.

— StephenESC

@StephenESC двома способами. Додайте клас inline-blockдо frame-headerелемента. Або змінити з inline-blockдопомогою frame-headerв CSS селекторів.

— юнзен

1

IE7 не підтримує "вбудований блок" належним чином, більше інформації тут: LINK
Використання може використовувати: "inline".

Чого саме ви намагаєтесь досягти? Зробіть нам приклад і поставте тут: http://jsfiddle.net/

— Іладарда
джерело

0

використовувати вбудований, він працює з таким видом селекторів для елементів списку:

ul li {}

або конкретніше:

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

— MiddleKay
джерело

2

inlineне те саме, що inline-block. Наприклад, приклад height: 25px;у прикладі не набере чинності, коли елемент є inline. Крім того, питання нічого не говорить про списки.

— капа