Как я могу переопределить «display: inline-block» с «display: block» в IE7?

Question

Вот код, иллюстрирующий проблему, с которой я столкнулся. jsFiddle Demo

<div class="normal">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib blockbyclass">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;}
div.ib a {display: inline-block;}
div.normal > a {display: block;}
div.blockbyclass> a {display: block; }

У меня есть определенный тип ссылки, который в большинстве случаев должен отображаться как inline-block, но в определенном случае должен отображаться как блочный элемент. В частности, я хочу, чтобы каждый из них появлялся в отдельной строке и занимал всю область содержащего элемента div. В этом конкретном случае div, содержащий ссылки, устанавливается на плавающее, поэтому он будет изменять свой размер в зависимости от самой большой из ссылок внутри него. IE8, IE9, Firefox и Chrome правильно отображают эти ссылки, но независимо от того, что я делаю, IE7 отказывается забыть правило display: inline-block.

Как я могу заставить IE7 показывать эти элементы в режиме "блока"?

Answer 1

Обновление: перенесено из комментариев сюда:

Проблема в div плавающем.Когда вы перемещаете элемент, который будет находиться за пределами обычного потока страниц, поэтому IE примет за него width:0; height:0;, а когда вы добавите в него некоторые элементы, они создадут свои собственные height и width иfloated-element будет отображаться как их можно нажать (мой английский очень плохой, извините) .Первый шаг, A равен inline-block, поэтому его height равен, например, x.когда вы делаете это block, оно должно заполнить своего родителя, но, в уме IE, его родитель имеет width:0.поэтому вы должны удалить первый атрибут inline-block из div.ib a ИЛИ , вы можете создать атрибут fixed-width для плавающего элемента div.

div { float: left; margin: 5px; width: 80px; } 

также, насколько я знаю, W3C рекомендует, чтобы плавающие элементы имели фиксированную ширину .- IE 6 тоже нужна фиксированная высота для правильной работы !!!

Другой способ - , если вы можете, и ваше решение позволяет вам - это изменение первого inline-block на inline только для IE:

display: inline-block; 
*display: inline; 

Но решение width (для div) является более стандартным и гибким.

END UPDATE

Однако, для переопределения css-attribute только в IE, у вас есть 3 варианта:

1. Первый способ - использование условного комментария , который делает его содержимое видимым только для IE.Полный пример выглядит примерно так:

   <!-- visible to IE less that 7 (6, 5, etc) -->
   <!--[if lt IE 7]> <link href="/Content/ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
   
   <!-- visible to IE 7 only -->
   <!--[if IE 7]> <link href="/Content/ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->
   
   <!-- visible to IE 8 only -->
   <!--[if IE 8]> <link href="/Content/ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
   
   <!-- visible to IE 9 and above and also visible to other browsers -->
   <!--[if gt IE 8]><!--> <link href="/Content/normal.css" rel="stylesheet" type="text/css" /> <!--<![endif]-->
   

   Как видите, у вас есть много вариантов использования условного комментария .

2. Другой способ - использовать CSS специальные селекторы, которые делают некоторые селекторы видимыми для IE и скрывают их от других браузеров.Полный пример:

   /* normal */
   your-selector{
   }
   
   /* visible to IE 6 only */
   * html your-selector{
   }
   
   /* visible to IE 7  only */
   *:first-child + html your-selector{
   }
   
   /* visible to IE 7 and above */
   html > body your-selector{
   }
   
   /* visible to IE 8 and above */
   html > /**/ body your-selector{
   }
   

3. Третий известный мне способ - использование IE специализированных css-свойств:

   /* normal selector */
   your-selector{
       /* normal property, visible to all browsers */
       color: #FF0;
       padding: 20px auto 35px;
   
       /* use special properties in name/value for IE */
   
       /* visible to ie 6 only */
       _color: #FF0;
       _padding: 15px auto 30px;
   
       /* visible to ie 7 and below (7, 6, 5, ...) */
       *color:#FF0;
       *padding: 15px auto 30px;
   }
   

---

Дайте мне знать, если у вас есть какие-либо вопросы или вам нужны разъяснения по любой части.

Answer 2

В соответствии с этой статьей display:inline-block поведение аналогично display:inline в IE7, поэтому вы можете вносить изменения только для поддержки IE7 (с простым взломом для IE * 1006).*):

div.ib a {
   display: inline-block; 
   *display: inline; /* IE7 and below */ 
}

Надеюсь это работает, как вы ожидали.

---

РЕДАКТИРОВАТЬ:

ОК,Проблема со свойством hasLayout, объясняющим здесь .И zoom:1, и height:any_value активируют hasLayout, поэтому между тем display:inline-block; *display:inline работает, чтобы перезаписать следующие объявления display:block, а height:30px (например) возвращает свойство hasLayout.Поэтому нужно удалить hasLayout, как сказано в этой статье .

У меня есть эта демонстрация , чтобы показать, как работает.Поскольку height практически неприкосновенен, я использую padding-bottom и font-size для имитации height в других браузерах.Обратите внимание, что width самого широкого элемента сохраняется.

---

EDIT2:

У вас есть продуманные jQuery решения?(Только в IE7 элементы различаются width)

Answer 3

Ваша проблема - триггер hasLayout с настройкой inline-block. Цитировать http://www.satzansatz.de/cssd/onhavinglayout.html (мой акцент добавлен):

"Свойство display отличается: в то время как 'inline-block' устанавливает haslayout = true, флаг не будет сброшен до false позже, переопределив значение с помощью 'block' или 'inline' в другом наборе правил ."

Это не похоже на большинство hasLayout триггеров, которые могут быть сброшены. Поэтому, думаю, чтобы решить вашу проблему, нужно думать наоборот. Вам нужно, чтобы block был вашим значением по умолчанию для тега a, а затем добавить класс, чтобы получить inline-block, когда вам это нужно.

Вроде как http://jsfiddle.net/mmpX3/33/, где blockbyclass Я заменил на inlinebyclass (что на самом деле inline-block).

Обновлено Объяснение: Вы, вероятно, заметили, что когда вы переключились на block после перехода с inline-block, это "вроде сработало" (строки текста все еще перемещаются вниз). Это потому, что он отображается как блок, но тот, который hasLayout, в отличие от того, который нет. Я не знаю вашей конкретной ситуации, но , если вы можете установить a width на содержащем div, то вторичным решением, которое я предложил выше для "мышления в обратном направлении", является установка width: 100% в сочетании с вашим «сбросом» на block, вот так: http://jsfiddle.net/mmpX3/64/.

Обновлено Внимание: Я не знаю, есть ли у вас другие css, которые вы планируете применить к тегам a, но если какой-либо из этих триггеров hasLayout, вам нужно следить за что (и, возможно, найти другой метод). См., Например, эту скрипку http://jsfiddle.net/mmpX3/69/, в которой все установлено на block, но, поскольку я поместил min-height в тег a, у него все еще есть те же проблемы, что и у вашей исходной проблемы.

Answer 4

display: inline-block 

для IE7 выглядит так:

*display: inline;
zoom: 1

Answer 5

Вы можете поместить стили для IE7 в отдельный CSS и использовать условный комментарий , чтобы включить его только для IE7.

<!--[if IE 7]>
<link ...your IE7 specific stylesheet goes here ... >
<![endif]-->

Убедитесь, что этот фрагмент кода находится ниже ссылки на обычный файл CSS.

Answer 6

Похоже, здесь виноват float.Дело не в том, что IE7 не помечает элемент как block, я думаю, это связано с тем, что div float не имеет ширины.Это можно увидеть здесь:

http://jsfiddle.net/mmpX3/129/

Обычно при работе со старыми браузерами я обнаружил, что плавающие элементы в <= IE7, как правило, нуждаются в фиксированной ширине, чтобы избежать проблем.</p>

В вашем случае я бы предложил добавить фиксированную ширину в качестве JS Fiddle или удалить float, если она не нужна.Если я увижу вариант использования для всплывающего div, я смогу найти альтернативу.

Почему комбинация float и display:inline-block останавливает display:block от повторного использования?Я не знаю.Это звучит как типичная ошибка IE7, которую можно обойти.

Answer 7

Я не совсем уверен, каков конечный результат, к которому вы стремитесь.Вы пытаетесь сделать черный фон целым прямоугольником, который инкапсулирует обе ссылки вместо двух прямоугольников (по 1 на каждую ссылку)?

Если это так, почему бы не применить фон к DIV вместоссылки?

РЕДАКТИРОВАТЬ: Кажется, есть ошибка в IE7, которая заставляет его отображать элементы в смеси block и inline-block, когда одно из правил, которое применяется к элементу имеет display: inline-block, даже еслидругое значение для display имеет приоритет.

Если вы видите http://jsfiddle.net/P2N5c/16/, не имеет значения, является ли правило с display: block первым (как правило, использующее * 1015).* Правило) или, если это последний.

Пока я не уверен, как предотвратить эту ошибку, но вы могли бы обойти ее, не давая ссылки и ib и blockbyclass и просто даваяэто классы, которые делают их блоками.Т.е. не дают им ib.Вместо добавления класса для переключения состояний DIV замените один класс другим.

Answer 8

Вот в чем дело: если вам нужно, чтобы якоря тега a отображались в своих собственных строках, они являются блочными элементами, а не встроенными ... На самом деле, в том, что вы говорите, нет ничего, что указывало бы на необходимость встроенный блок. Ваши divs являются плавающими, поэтому они будут складываться влево, в строку (но не в строку; они находятся вне потока документа, таким образом float).

Попробуй это ... давай разберемся. Вот HTML-код, который вы нам дали:

<div class="normal">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib blockbyclass">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

С помощью предоставленного вами CSS, в Safari и Firefox, я вижу три блока с двумя ссылками каждый, каждый на своей строке. Однако в IE7 вы видите не два элемента inline-block, а только два элемента inline. Причина этого в том, что inline-block не поддерживается в IE7 из-за ошибки hasLayout (что-то Microsoft создана для упрощения простого вопроса). Другими словами, он не может забыть inline-block, потому что он просто не понимает inline-block (что вы неправильно поняли при необходимости) и обрабатывает a по умолчанию (например, inline).

Если они должны находиться на отдельных строках и занимать ширину контейнера, все, что вам нужно сделать, это (показано на .ib a, полностью игнорируя blockbyclass, которая в данном случае выглядит просто как красная сельдь) ):

.ib a {display:block;}

TADA! Ширина наследуется от родительского контейнера, a принимает значения по умолчанию a, и все устраивает. Итак, взгляните на это:

<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

Это, в этом случае, становится излишним и, следовательно, ненужным. Вы уже делаете блок этих элементов.

<div class="ib">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>

Вы просто слишком усложняете что-то действительно очень простое.

Вот скрипка: http://jsfiddle.net/dhYjZ/1/

Answer 9

Похоже, работа выполнена. Я использую ваш код, попробуйте: http://jsfiddle.net/Lkwzx/1/

Секрет в этой строке: div.ib a { display: inline-block; *display: inline; }

Answer 10

Проще говоря, я заменяю все мои display:inline-block; использования на display:inline;, и я делаю это также условно, как и в ответах, приведенных выше.

В вашем примере я нахожу успех с помощью следующего:

body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;display:block;}

Jsfiddle: http://jsfiddle.net/zL3Ea/