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

Question

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

Answer 1

好吧,如果你想通过检查浏览器的bavhiour w/javascript而不是用户代理嗅探,你可以去做什么:

设置测试场景和控制场景.比方说,有以下结构:

• DIV
  • div w/content"test"
  • div w/content"test2"

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

替代答案:

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

Answer 2

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

(注意:我忽略了Firefox 2缺乏支持inline-block并假设绝大多数用户已经升级到FF3,但是简短的谷歌搜索没有发现任何数据来支持这一点.YMMV.)

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

Answer 3

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