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

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

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

备选答复:

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

根据 QuirksMode charts inline-block 是IE6和IE7。(好吧,他们支持它,但只支持具有本机 display 类型 inline )我假设它是受支持的,然后通过 conditional comments .

(注意:我忽略了Firefox2对 假设绝大多数用户都升级到了FF3,但谷歌没有找到任何数据来支持这一点。YMMV。)

YAHOO.env.ua 来自 YUI library 是一个方便的代码块,您可以复制和使用。(它是BSD许可的,不依赖于YUI库的其他部分,并且只有大约25-30行没有注释)

a neat way 仅使用CSS在IE6+、FF2+、Opera和WebKit中实现跨浏览器内联块。(不是有效的CSS,但仍然只有CSS。)

Christopher Swasey 这是非常正确的。

我已经在上建立了他的技术的JSFIDLE演示 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 支持

使用Javascript无法检测到这一点,因为它是一个纯CSS属性,与Javascript中的任何对象或函数都不相关。我能告诉你的最好的事情就是检查一下 here