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

Question

怎么你可以检测，如果浏览器支持的CSS属性显示：内联块?

Answer 1

无法使用Javascript检测到这一点，因为它是一个与Javascript中的任何对象或函数无关的纯CSS属性。我能告诉你的最好的事情是检查这里，以获得良好的兼容性列出并使用CSS创建变通方法。

Answer 2

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

设立了一个测试方案，以及控制的情况。与，比如说，以下结构：

• div
  • div w/内容"测试"
  • div w/内容"测试2"

插入一个复制成文件，与内部两个div设置为联块，并插入另一个复制成文件，与内部两个div设置来阻止。如果浏览器支持内联块，然后该含div将具有不同的高度。

备用答案：

你也可以使用getComputedStyle，看看如何浏览器是处理一个特定单元的css。因此，在理论上，可以添加一个元件"显示：内联块"，然后检查computedStyle看到，如果它幸存下来。唯一的问题：即不支持getComputedStyle.相反，它具有currentStyle.我不知道如果currentStyle功能等同(大概是它的功能类似的行为，我们想要的：无视"无效"值)。

Answer 3

根据 QuirksMode排行榜，唯一不支持 inline-block 是IE6和7.（好吧，他们支持它，但仅适用于具有本机 display 类型的 inline 的元素。）I' d只是假设它受支持，然后通过条件注释为IE6 / 7应用解决方法。

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

如果确定来自JavaScript的支持是您唯一的选择，那么您将不得不回到用户代理嗅探。来自 YAHOO.env.ua 课程“http://developer.yahoo.com/yui/”rel =“noreferrer”> YUI库是一个方便的代码块，您可以复制和使用它。 （它的BSD许可，不依赖于YUI库的其他部分，只有大约25-30行没有评论）

Answer 4

顺便说一句：一个整洁的方法仅用CSS在IE6 +，FF2 +，Opera和WebKit中实现跨浏览器的内联块。 （不是有效的CSS，但仍然只有CSS。）

Answer 5

Christopher Swasey 非常正确。

我已经在 http://ajh.us/test-设置了他的技术的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 支持。