css - 检查 CSS calc 在 Chrome 中不起作用

Question

我搜索了一种方法来检测浏览器是否支持 CSS calc 并发现： 如何检查 CSS calc() 是否可以使用 JavaScript？ 我修改了5号的解决方案如下：

help = $('<img src="/images/buttonup.png">')
help.css({ width: "10px" });
help.css({ width: "calc(10px + 10px)" });
if (help.width() == 20) var calcSupport = true; else var calcSupport = false;

不幸的是，这在 Chrome 中不起作用：尽管 Chrome 显然支持 calc，但 help.width() 返回 0。在 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)");