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

1

没有办法检测到使用Javascript，因为它是一个纯CSS属性，它与Javascript中的任何对象或函数无关。我可以告诉你的最好的事情是检查here是否有很好的兼容性列表，并使用CSS创建解决方法。

2009-03-02 02:53:47

+0

@Alan H .:嗨！我不认识你，但我感谢你对我的回答提出的建设性批评！我也期待着你对这个问题的回答，你向我们展示了如何去做。你会告诉我们的方式，对吧？ :) – 2011-02-18 01:21:02

+1

http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting实际上，Christopher Swasey提供了一种方法来在下面的答案中用JS来检测它。至少Alan H.在你的回答中写下他认为是问题的东西。没有那种奢侈，我就会对旧的答案望尘莫及。 – Boldewyn 2011-02-18 07:36:48

+0

@Boldewyn：我会认为你链接到的文章和Christopher Swasey的回答都是变通方法（*好的解决方法，但是变通办法）。我仍然相信没有“干净”的方式来检测浏览器对特定CSS功能的支持。我也不会把艾伦的评论称为奢侈品。 :) – 2011-02-18 14:07:17

7

按照QuirksMode charts，不支持inline-block唯一的主流浏览器IE6是和7（嗯，他们支持它，但仅适用于具有天然display类型的inline元素。）我只是假设它是支持然后通过conditional comments针对IE6/7应用解决方法。

（注：我忽略了Firefox 2中的缺乏支持inline-block，并假设绝大多数用户都升级到FF3，但短暂的谷歌搜索没有任何挖掘的数字备份，高达因人而异。）

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

来源

2009-03-02 03:01:48

+0

刚刚查看了我网站上的统计数据，他们似乎支持你的假设，即大多数FF用户已升级到FF 3. IMO决定为未来设计一个好主意。 – 2009-03-02 04:13:02

12

那么，如果你想纯粹通过检查bavhiour的浏览器w/javascript代替用户代理嗅探：

设置测试场景和控制场景。有了，比方说，以下结构：

格
- DIV W /内容 “测试”
- DIV W /内容 “test2的”

插入一个拷贝到将两个内部div设置为内嵌块的文档，并将另一个副本插入到文档中，并将两个内部div设置为阻止。如果浏览器支持内嵌块，则包含的div将具有不同的高度。

~~备选答案：~~

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

来源

2009-03-02 04:38:56

3

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

来源

2010-02-04 10:54:28 Boldewyn

2

Christopher Swasey是相当正确的。

我已经在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-19 08:21:59

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

回答

相关问题