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

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

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

根据，唯一不支持

内联块的主流浏览器是IE6和7。（好吧，他们支持它，但仅适用于具有本机
显示类型
内联类型
的元素）我假设它受支持，然后通过应用IE6/7解决方案

（注意：我忽略了Firefox2缺乏对
内联块的支持，并假设绝大多数用户都升级到了FF3，但简短的谷歌搜索没有找到任何数据来支持.YMMV。）

但是，如果确定对JavaScript的支持是您唯一的选择，那么您将不得不求助于用户代理嗅探。中的类是一个方便的代码块，您可以复制和使用它。（它是BSD许可的，不依赖于YUI库的其他部分，并且只有大约25-30行没有注释）
好吧，如果您想纯粹通过检查浏览器的bavhiour w/javascript而不是用户代理嗅探来实现，那么可以这样做：

设置测试场景和控制场景。例如，采用以下结构：


div

部门/内容“测试”
部门w/内容“测试2”


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

备选答复：

您还可以使用getComputedStyle查看浏览器如何处理给定元素的css。因此，从理论上讲，您可以添加一个带有“display:inline block”的元素，然后检查computedStyle是否存在。唯一的问题是：IE不支持getComputedStyle。相反，它具有当前样式。我不知道currentStyle的功能是否相同（可能它的功能类似于我们想要的行为：忽略“无效”值）。
顺便说一句：IE6+、FF2+、Opera和WebKit中的跨浏览器内联块需要单独使用CSS来实现。（不是有效的CSS，但仍然只有CSS。）
非常正确

我已经在上建立了他的技术的JSFIDLE演示

该守则基本上是：

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);

请注意，这种完全相同的技术也适用于检测
显示：运行在
支持中。
刚刚检查了我网站上的统计数据，他们似乎支持您的假设，即大多数FF用户已升级到FF 3。在我看来，为未来设计是个好主意。@Alan H:嗨！我不认识你，但我感谢你对我的回答提出建设性的批评！我也期待着你对这个问题的回答，在这个问题上，你向我们展示了如何做到这一点。你要给我们指路，对吗？：）实际上，Christopher Swasey在下面的回答中提供了一种用JS检测的方法。至少艾伦·H.在你的回答中写下了他认为是问题的地方。我在没有这些奢侈的情况下对旧的答案投了赞成票。@ Boldewyn：我认为你链接到的文章和Christopher Swasey下面的答案都是解决办法（好的解决办法，但是解决办法）。我仍然相信没有“干净”的方法来检测浏览器对特定CSS功能的支持。此外，我几乎不会把艾伦的评论称为奢侈。：）使用这种技术，我的IE 6和7机器都说它们支持
div
上的
inline block
，而实际上，它们都将其显示为
block
元素。我刚刚测试了这一点（via），并且
currentStyle
显示了
inline block
不受支持的元素（即IE 6和7中的
div
s）您的其他测试确实有效（至少在JSFIDLE的洁净室中）：