Обнаружить поддержку браузером display:inline-block

Question

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

Answer 1

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

Answer 2

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

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

• div
  • div с содержимым "тест"
  • div с содержимым "test2"

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

Я установил демо-версию его техники 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 поддерживать.