Поддержка браузера для отображения: встроенный блок - PullRequest
Новая
       7

Поддержка браузера для отображения: встроенный блок

8 голосов
/ 02 марта 2009

Как определить, поддерживает ли браузер отображение атрибута CSS: inline-block?

Ответы [ 5 ]

12 голосов
/ 02 марта 2009

Ну, вот что вы можете сделать, если вы хотите сделать это просто, изучив bavhiour браузера с javascript вместо анализа пользовательского агента:

Настройка тестового сценария и контрольного сценария. С, скажем, следующей структурой:

  • ДИВ
    • div с содержанием "test"
    • div с содержимым "test2"

Вставьте одну копию в документ с двумя внутренними элементами div, установленными в inline-block, и вставьте еще одну копию в документ с двумя внутренними элементами div, установленными в block. Если браузер поддерживает inline-block, содержащиеся в нем div будут иметь разную высоту.

Альтернативный ответ:

Вы также можете использовать getComputedStyle, чтобы увидеть, как браузер обрабатывает CSS данного элемента. Итак, теоретически вы можете добавить элемент с «display: inline-block», а затем проверить computedStyle, чтобы увидеть, сохранился ли он. Единственная проблема: IE не поддерживает getComputedStyle. Вместо этого у него есть currentStyle. Я не знаю, функционирует ли currentStyle одинаково (предположительно, оно работает аналогично тому, как мы хотим: игнорируя «недопустимые» значения).

7 голосов
/ 02 марта 2009

Согласно диаграммам QuirksMode , единственными распространенными браузерами, не поддерживающими inline-block, являются IE6 и 7. (Ну, они поддерживают его, но только для элементов, которые имеют собственный тип display inline.) Я бы просто предположил, что это поддерживается, и затем применил бы обходной путь для IE6 / 7 через условные комментарии .

(Примечание: я игнорирую отсутствие поддержки Firefox 2 для inline-block и предполагаю, что подавляющее большинство пользователей обновилось до FF3, но краткий поиск в Google не обнаружил никаких цифр, подтверждающих это. *

Если определение поддержки из JavaScript является вашим единственным вариантом, вам придется воспользоваться анализом пользовательского агента. Класс YAHOO.env.ua из библиотеки YUI - это удобный кусок кода, который вы можете копировать и использовать. (Он имеет лицензию BSD, не зависит от других частей библиотеки YUI и составляет всего около 25-30 строк без комментариев)

3 голосов
/ 04 февраля 2010

Кстати: существует удобный способ реализовать кросс-браузерные встроенные блоки в IE6 +, FF2 +, Opera и WebKit только с CSS (Недействительный CSS, но все еще только CSS.)

2 голосов
/ 19 февраля 2011

Кристофер Свази совершенно правильно.

Я установил демо jsFiddle для его техники на http://ajh.us/test-inline-block.

Код по сути: 

var div = document.createElement('div');
div.style.cssText = 'display:inline-block';

// need to do this or else document.defaultView doesn't know about it
$('body').append(div); 
// that was jQuery. It’s possible to do without, naturally

var results = false;

if (div.currentStyle) {
    results = (div.currentStyle['display'] === 'inline-block');
} else if (window.getComputedStyle) {
  results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block';  
}

//clean up
$(div).remove();

alert('display: inline-block support: '+results);

Обратите внимание, что точно такой же метод работает и для обнаружения поддержки display: run-in.

1 голос
/ 02 марта 2009

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

...