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

Question

Как вы можете определить, поддерживает ли браузер отображение атрибута CSS: встроенный блок?

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

• сНу
  • ДИВ ж/контент "тест"
  • ДИВ ж/содержимого "test2"

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

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

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

Answer 4

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

Answer 5

Christopher Swasey - это совершенно правильно.

Я создал демонстрационную версию 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.