8

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

4

5 回答 5

12

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

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

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

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

替代答案：

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

于 2009-03-02T04:38:56.620 回答
7

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

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

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

于 2009-03-02T03:01:48.740 回答
3

顺便说一句：在 IE6+、FF2+、Opera 和 WebKit 中使用 CSS 实现跨浏览器内联块是一种很好的方法。（无效的 CSS，但仍然只有 CSS。）

于 2010-02-04T10:54:28.530 回答
2

克里斯托弗斯瓦西是完全正确的。

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

于 2011-02-19T08:21:59.863 回答
1

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

于 2009-03-02T02:53:47.043 回答