检查 CSS calc 在 Chrome 中不起作用答案

【问题标题】：Check for CSS calc doesn't work in Chrome检查 CSS calc 在 Chrome 中不起作用
【发布时间】：2015-09-22 10:01:04
【问题描述】：

我搜索了一种检测浏览器是否支持 CSS calc 的方法，发现： How can I check if CSS calc() is available using 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 中它运行良好。我做错了什么？

【问题讨论】：

标签： css google-chrome calc

【解决方案1】：

更好地使用CSS.supports:

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

【讨论】：

仅适用于有限的浏览器集。
@Nit 是的，但这是正确的做法。 Chrome支持它，所以它解决了这个问题。当然，可能需要一个肮脏的 IE hack。
我几乎不会把在两种常见浏览器上完全不支持的东西称为“正确方式”。
@Nit CSS.supports 是更简洁的测试方法，它在 CSS Conditional Rules 中标准化，这是一个候选推荐。如果某些浏览器不支持它，那是他们的错。作为开发人员，我们可以为这些提供后备代码。但这并不意味着后备代码更好。
这个解决方案+1。尽管可能并非所有浏览器都支持它，但我不明白为什么有人反对！另外，浏览器只支持“流行”的东西——让我们让它流行吧！ :)

【解决方案2】：

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。

【讨论】：

@RickHitchcock 感谢您注意到这一点。 clientWidth 不可靠，它在 Firefox 上给出了误报。我已经切换到getComputedStyle。
这是解决方案：将帮助元素添加到 dom 解决了问题。非常感谢这个提示！

【解决方案3】：

我想这就是你要找的..

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

【讨论】：