检测浏览器对显示的支持：inline-block

发布于 2024-07-14 12:48:58 字数 44 浏览 11 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七禾 2024-07-21 12:48:58

好吧，如果您想纯粹通过使用 javascript 检查浏览器的行为而不是用户代理嗅探来完成此操作，您可以执行以下操作：

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

div
- div w/内容“测试”
- div 内容为“test2”

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

~~替代答案：~~

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

回复收藏 0 原文

森罗 2024-07-21 12:48:58

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

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

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

回复收藏 0 原文

宁愿没拥抱 2024-07-21 12:48:58

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

回复收藏 0 原文

梦晓ヶ微光ヅ倾城 2024-07-21 12:48:58

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

Christopher Swasey is quite correct.

I have set up a jsFiddle demo of his technique at http://ajh.us/test-inline-block.

The code is essentially:

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);

Please note this exact same technique also works for detecting display: run-in support.

回复收藏 0 原文