检查CSS calc不'；我不能在铬上工作

我搜索了一种检测浏览器是否支持CSS calc的方法，发现如下： 我将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;

help=$（“”）
css（{width:“10px”}）；
css（{width:“calc（10px+10px）”}）；
如果（help.width（）==20）var calcSupport=true；else var calcSupport=false；

不幸的是，这在Chrome中不起作用：help.width（）返回0，尽管Chrome显然支持calc。 在Firefox中，它运行良好。我做错了什么？

更好地使用：

var calcSupport=CSS.supports（“宽度”、“计算（10px+10px）”）；

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

因此，您可以将元素附加到

主体

，读取其宽度，然后将其删除

var el=document.createElement（'img'）；
el.style.width=“计算（10px+10px）”；
文件.正文.附件（el）；
var calcSupport=getComputedStyle（el）.width=='20px'；
文件.正文.删除文件（el）；

---

对于不支持

getComputedStyle

的非常旧的浏览器，您可以使用jQuery

$（el）.width（）==20

，我想这就是您要找的

HTML:

Javascript:

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

---

只在有限的浏览器上工作。@是的，但这是正确的方法。而且Chrome支持它，所以它解决了这个问题。当然，可能需要一个肮脏的IE黑客。我几乎不会把在两个普通浏览器上根本不支持的东西称为“正确的方法”。@Nit

CSS.supports

是测试这个的更干净的方法，它在中是标准化的，这是一个候选推荐。如果一些浏览器不支持它，那是他们的错。作为开发人员，我们可以为这些提供后备代码。但这并不意味着回退代码更好。此解决方案为+1。虽然不是所有浏览器都支持它，但我不明白为什么会有人投了反对票！另外，浏览器只支持“流行”的东西——让我们让它流行起来吧！：）@谢谢你注意到这一点

clientWidth

不可靠，它在Firefox上给出了错误的否定。我已经切换到

getComputedStyle

。这是解决方案：将help元素添加到dom中修复了这个问题。非常感谢你的提示！

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

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