检测浏览器对 display:inline-block 的支持答案

【问题标题】：Detect Browser Support for display:inline-block检测浏览器对 display:inline-block 的支持
【发布时间】：2010-10-10 17:01:50
【问题描述】：

如何检测浏览器是否支持 CSS 属性 display:inline-block？

【问题讨论】：

标签： javascript css cross-browser browser-detection

【解决方案1】：

好吧，如果你想纯粹通过检查浏览器的浏览器 w/javascript 而不是用户代理嗅探来做到这一点，你可以这样做：

设置测试场景和控制场景。比如说，下面的结构：

div
- 带有内容“测试”的 div
- 带有内容“test2”的div

在两个内部 div 设置为 inline-block 的情况下将一个副本插入到文档中，然后在两个内部 div 设置为 block 的情况下将另一个副本插入到文档中。如果浏览器支持 inline-block，那么包含的 div 将具有不同的高度。

~~替代答案：~~

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

【讨论】：

我刚刚测试了这个（通过@Alan H's jsFiddle），currentStyle 显示了 inline-block 不支持的元素（即 IE 6 和 7 中的 divs）
您的其他测试确实有效（至少，在 jsFiddle 的洁净室中）：jsfiddle.net/bdukes/cHUps/5

【解决方案2】：

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

【讨论】：

使用这种技术，我的 IE 6 和 7 机器都说它们在 div 上支持 inline-block，而实际上它们都将其显示为 block 元素。跨度>

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

刚刚查看了我网站上的统计数据，它们似乎支持您的假设，即大多数 FF 用户已升级到 FF 3。而且 IMO 无论如何为未来设计是个好主意。

【解决方案5】：

没有办法用 Javascript 检测到它，因为它是一个纯 CSS 属性，与 Javascript 中的任何对象或函数无关。我可以告诉你的最好的事情是检查here 以获得相当好的兼容性列表并使用 CSS 来创建解决方法。

【讨论】：

@Alan H.：嗨！我不认识你，但我感谢你对我的回答的建设性批评！我也期待您对这个问题的回答，您将在其中向我们展示如何做到这一点。你要给我们指路，对吧？ :)
peter.michaux.ca/articles/… 实际上，Christopher Swasey 在下面的回答中提供了一种使用 JS 检测它的方法。至少 Alan H. 确实在您的答案中写下了他认为的问题。如果没有那种奢侈，我会对旧答案投反对票。
@Boldewyn：我认为您链接到的文章和下面克里斯托弗斯瓦西的回答都是解决方法（good 解决方法，但仍然是解决方法）。我仍然相信没有“干净”的方法来检测浏览器对特定 CSS 功能的支持。我也很难将艾伦的评论称为奢侈品。 :)