2013-02-15 3 views
0

Так что я знаю, что IE8 и ниже не нравится inline-block, но я читал, что inline должно привести к такому же поведению. Таким образом, я изменил скопировал мой main.css в main-ie8below.css и изменил все inline-block на inline. Для достижения этой цели я использую следующий код:IE8 и ниже встроенный блок CSS

 <!--[if lte IE 8]> 
      <link rel="stylesheet" type="text/css" href="/media/css/main-ie8below.css" /> 
     <![endif]--> 
     <!--[if gt IE 8]> 
      <link rel="stylesheet" type="text/css" href="/media/css/main.css" /> 
     <![endif]--> 
     <!--[if !IE]><!--> 
      <link rel="stylesheet" type="text/css" href="/media/css/main.css" /> 
     <!--<![endif]--> 

Однако, это не работает. Кажется, что мои утверждения if неверны. Это так, или я пропустил что-то еще?

Вот HMTL в вопросе (бесполезный материал удален):

<nav id="main_nav" role="navigation"><!-- 
          <div><a href=""><img src="" /></a></div><!-- 
        --><div><a href=""><img src="" /></a></div><!-- 
        --><div><a href=""><img src="" /></a></div><!-- 
        --><div><a href=""><img src="" /></a></div><!-- 
        --> 

Вот скрипку, но без изображений:

http://jsfiddle.net/bqXsU/

+0

Когда я сталкиваюсь с обнаружением функций IE, я считаю, что лучшим подходом было бы придерживаться метода Boilerplate HTML5: ' ' и в вашем' main.css' добавить правило для. .lt-ie8 .my-inline-block-element {} ' – 321zeno

+0

Что именно не работает? Снимок экрана или jsfiddle будет очень полезен. – Sean

+0

Я подозреваю, что ваша проблема может заключаться в том, что добавление/поля не добавляются (они не работают с встроенными элементами). Я не знал о масштабировании для IE8 и ниже, хотя это может быть и вашей проблемой – Sean

ответ

0

Оказалось, что элементы HTML5 не распознаются IE8. Добавив HTML5shiv, я смог его исправить.

3

Вы должны использовать этот путь:

display: inline; 
zoom: 1; 

Я думаю, вы пропустили zoom: 1 часть. И если вы сцепления с существующей таблицей стилей, которая идет для всех версий IE и современных браузерах, это хорошо, чтобы использовать этот способ:

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

Но проблема заключается в том, что ваш CSS не может подтвердить.


Не понимаю, какая часть вы не поняли. Позвольте мне объяснить три вещи, которые я использовал.

  1. Star Hack: Предварение перед правила стиля в *, он будет виден только IE 7 и ниже.
  2. Валидационный выпуск: Недействительными свойствами CSS являются правила и *display.
  3. Как это работает? В IE 7 и ниже этот zoom: 1; вызывает функцию hasLayout элемента, тем самым делая его доступным width, height, margin и padding.
+0

Не могли бы вы объяснить последняя часть немного подробнее? – thatidiotguy

+0

@thatidiotguy Добавлено объяснение. Пожалуйста, дайте понять, что вы ничего не понимаете. :) –

+0

К сожалению, это не исправление для IE8, я опубликовал фрагмент html, в котором я использовал 'inline-block' для. Его по существу горизонтальная панель навигации – thatidiotguy

Смежные вопросы