Что означает *display в CSS?

Возможный дубликат:
Что означает ли свойство со звездочкой в ​​CSS?

Я наткнулся на это, просматривая кросс-браузерную поддержку display: inline-block...

selector {
  display: -moz-inline-box;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

Что делает *display?

Ссылка с: http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/


css cross-browser
person Jeff    schedule 13.04.2011    source источник
comment
Я сомневаюсь, что -moz-inline-box необходим, Gecko теперь поддерживает встроенный блок. zoom: 1 также, вероятно, не нужен, так как display: inline-block; выполняет ту же задачу. Для IE6 просто обычный *-less display: inline; последний будет иметь приоритет, и для других IE вы, вероятно, можете иметь его в другом правиле впоследствии, все еще без *, и он будет работать так же. (По сути, в этом сообщении в блоге всегда был глупый код, и сейчас он стал еще глупее, чем был.)   -  person reisio    schedule 13.04.2011

Ответы (5)


arrow_upward
8
arrow_downward 

*property: value;

Это хак, поэтому я не рекомендую вам его использовать. Стили, представленные таким образом, интерпретируются только IE 7 и ниже, поэтому другие браузеры полностью игнорируют эти стили.

Это нестандартный (или допустимый) CSS, но иногда он используется, чтобы превзойти IE в подчинении.

person Blender    schedule 13.04.2011

arrow_upward
6
arrow_downward

как говорили другие, это хак для IE7 и ниже

НО этот пример, который вы привели, является конкретным взломом, поэтому, в отличие от полученного вами комментария, я бы не рекомендовал его удалять.. вы можете переместить его или удалить после того, как прочитаете это и не надо ;)

Кстати, я согласен, что -moz-inline-box, вероятно, больше не нужен, он был для более старых версий Firefox.

selector {
  display: -moz-inline-box;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

Это особый способ заставить IE6/7 отображать элемент блочного уровня как встроенный блок. Хотя IE поддерживает inline-block начиная с версии 5.5, он изначально не поддерживает блочные элементы.

Итак, в этом случае вам нужно дать элементу «макет» (zoom: 1;) и после этого передать его display: inline.

Теперь display:inline-block также дает макет элемента, поэтому, если вы удалите правило display-inline в отдельный набор правил (либо в условном, либо в взломанном правиле), вам больше не придется использовать zoom: 1;

Мой предпочтительный хак для этого (для демонстрационных целей) и потому, что встроенные блоки настолько полезны, и потому что он короче

selector {
  display: inline-block;
}


selector {
  display: inline !ie7;
}

что !ie7 делает то же самое, что и * перед свойством display, он передает это правило в IE7 и ниже - вы можете использовать версию * и во втором правиле, однако !ie7 ясно дает понять, для меня в любом случае это хак, и для кого это.

Если у вас есть определенная условная таблица стилей для IE7 и ниже, вы можете просто поместить в нее второе правило - без каких-либо * или ie7 ;)

selector {
  display: inline;
}

потому что IE по-прежнему будет читать первый набор правил и активировать его hasLayout на true с помощью inline-block там, вам не нужен zoom

упомянутый вами хак популярен, потому что он сохраняет все части в одном наборе правил, но в этом случае требуется zoom:1, поскольку inline-block не будет работать для установки hasLayout, если он находится в том же наборе правил, что и другое свойство display

person clairesuzy    schedule 13.04.2011

arrow_upward
0
arrow_downward

* впереди — это хак для браузеров IE, особенно версий 7 и ниже. Вы также можете увидеть _display, где _ впереди — это хак для IE версии 6 и ниже. Правила CSS с ними будут применяться только к этим версиям и игнорироваться другими браузерами.

person clmarquart    schedule 13.04.2011

arrow_upward
0
arrow_downward

Это хак для IE 7. Это свойство будет применяться только к IE 7.

Я всегда обращаюсь к Всеобъемлющему списку хаков CSS для конкретных браузеров Пола Айриша

person Jaspero    schedule 13.04.2011

arrow_upward
0
arrow_downward

Дополнение к другим вопросам:

Спецификация CSS говорит, что любое нераспознанное свойство должно быть отброшено. Это связано с будущей совместимостью.

Таким образом, для большинства браузеров *property не является допустимым свойством, и они просто пропустят его.

IE7 по непонятным мне причинам распознает *property как property и обрабатывает его, а другие нет.

person Ortiga    schedule 13.04.2011