Question

我搜索了一种方法来检测浏览器是否支持CSS calc并找到了： How can I check if CSS calc() is available using JavaScript? 我修改了第5号的解决方案如下：

不幸的是，这在Chrome中不起作用：help.width（）返回0，尽管Chrome支持显着的计算。在Firefox中它工作正常。我做错了什么？

Answer 1

Chrome无法可靠地提供尚未添加到DOM中的元素的计算样式。

因此，您可以将元素附加到body，读取其宽度，然后将其删除。

var el = document.createElement('img');
el.style.width = "calc(10px + 10px)";
document.body.appendChild(el);
var calcSupport = getComputedStyle(el).width == '20px';
document.body.removeChild(el);

对于不支持getComputedStyle的旧版浏览器，您可以使用jQuery $(el).width() == 20。

Answer 2

我想这就是你要找的......

HTML：

<img src="http://davidwalsh.name/demo/css3logo250.jpg" class='img'>

CSS：

.img{
   width: 100px;
   width: -webkit-calc(10px + 10px); 
   width:    -moz-calc(10px + 10px); 
   width:      -o-calc(10px + 10px);
}

使用Javascript：

var help = $(".img");
if(help.width() == 20){
   var calcSupport = true;
   alert('calc() is supported');
}else{
   var calcSupport = false;
}

JSFiddle

Answer 3

更好地使用CSS.supports：

var calcSupport = CSS.supports("width", "calc(10px + 10px)");

检查CSS calc在Chrome中不起作用

3 个答案: