Question

如何检测浏览器是否支持CSS属性显示：inline-block？

Answer 1

嗯，如果你想纯粹通过浏览w / javascript浏览器的bavhiour而不是用户代理嗅探，你可以去做什么：

设置测试场景和控制场景。比方说，有以下结构：

DIV
- div w / content“test”
- div w / content“test2”

将一个副本插入到文档中，并将两个内部div设置为inline-block，并将另一个副本插入到文档中，并将两个内部div设置为block。如果浏览器支持内联块，则包含的div将具有不同的高度。

~~替代回答：~~

您还可以使用getComputedStyle来查看浏览器如何处理给定元素的css。因此，理论上，您可以添加一个带有“display：inline-block”的元素，然后检查computedStyle以查看它是否存活。唯一的问题：IE不支持getComputedStyle。相反，它有currentStyle。我不知道currentStyle是否具有相同的功能（可能它的功能类似于我们想要的行为：忽略“无效”值）。

Answer 2

根据QuirksMode charts，唯一不支持inline-block的主流浏览器是IE6和7.（嗯，他们支持它，但仅适用于具有本机display类型的元素inline。）我只是假设它受支持，然后通过conditional comments为IE6 / 7应用解决方法。

（注意：我忽略了Firefox 2缺乏对inline-block的支持，并且假设绝大多数用户已经升级到FF3，但是简短的谷歌搜索没有发现任何数据来支持这一点.YMMV。）

如果确定来自JavaScript的支持是您唯一的选择，那么您将不得不回到用户代理嗅探。 YAHOO.env.ua中的YUI library类是一个方便的代码块，您可以复制和使用它。（它是BSD许可的，不依赖于YUI库的其他部分，并且只有大约25-30行没有注释）

Answer 3

顺便说一句：有a neat way在IE6 +，FF2 +，Opera和WebKit中单独使用CSS实现跨浏览器内联块。（不是有效的CSS，但仍然只有CSS。）

Answer 4

Christopher Swasey非常正确。

我在http://ajh.us/test-inline-block设置了他的技术的jsFiddle演示。

代码基本上是：

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支持。

Answer 5

无法使用Javascript检测到这一点，因为它是一个与Javascript中的任何对象或函数无关的纯CSS属性。我能告诉你的最好的事情是检查here是否有一个非常好的兼容性列表，并使用CSS创建一个解决方法。

检测浏览器支持显示：内联块

5 个答案: