jQuery CSS calc()函数

Question

我看到了这个页面CSS链接，深受其计算不同单位结果的想法所吸引。但是我尝试了以下代码：

$('selector').css({'width':'calc(100%-20px)'});

但是它不起作用...有人知道如何解决这个问题吗，或者为什么它不起作用吗？

- Val

Answer 1

jQuery支持calc()函数，我已经使用了很多次：

1. $(".content-section").css('width','calc('+contentSectionWidth+'% - 15px)');

2. $(".content-section").css('width','calc(100% - 15px)');

- Ravi verma

---

以上评论已经过时。现在calc可以与jQuery一起使用，就像这个例子一样。 - DrHall

示例2有一个不匹配的引号，我无法删除它，因为它被认为是太小的编辑。 - Brendan

Answer 2

jQuery不支持calc()属性值，当前所有的浏览器都不支持。

可以在这里查看比较：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

在您的示例中，可以直接在内部元素上使用margin代替：

<div class="parent"><div class="elem"></div></div>

.parent{
    width:100%;
    background:green;
}
.elem{
    margin: 0 10px;
    background:blue;
}

这样，.elem 的宽度将为100% - 20px。

- David Hellsing

---

谢谢，我认为浏览器不完全实现100％应该是非法的。哈哈，这是噩梦，浪费我们的时间尝试修复所有错误实现的浏览器。 - Val

不，这与浏览器无关，而是与CSS版本有关。浏览器很好，但它们仍然不完全支持CSS3。 - Omar Abid

这就是我的意思，他们不应该在每个浏览器完全支持它之前发布CSS3...因为这只会增加我们必须开始使用解决方法或黑客的另一件事情。 - Val

他们还没有“发布CSS3”。您正在查看标准化过程的草稿。 - bobince

这已经过时了 - 现在一些浏览器支持calc。 - kojiro

Answer 3

CSS3的一些部分得到了很好的支持，而其他部分则没有。这就是为什么它被拆分成模块，这些模块处于各种协议和实现的阶段。我们还有很长的路要走，甚至连完整的CSS3规范范围都没有，更不用说广泛的浏览器支持了。

因此，CSS Level 3 Selectors是最稳定的规范，已经通过了推荐并由许多浏览器和其他工具实现（虽然仍需要一段时间才能得到所有主流浏览器的良好支持）。其他一些PR和CR在最新的浏览器中也有足够的支持，因此值得关注。

但是，“CSS3 Values and Units”仍然只是一个早期的工作草案，并且很可能在推荐之前发生重大变化。实际上，自数年前起草开始以来，没有任何浏览器实现了calc()，因此在这个阶段，这个特性看起来不太可能成为标准。如果你想保持在得到良好支持的范围内，你需要坚持使用CSS 2.1。

同时，像100%-20px这样的东西必须通过嵌套元素、边距和填充来实现。

- bobince

---

我尝试了许多解决方法，但这让我感到头痛，因为几乎每次都会出现问题...我可以将宽度或高度转换为百分比，但是CSS2.1不允许在百分比中使用小数，这并不总是看起来很漂亮。 - Val

CSS 2.1 允许百分比中包含小数位。然而，它并不能完全解决相对计算或像素四舍五入的问题。 - bobince

Answer 4

Ravi Verma的回答是正确的。

我想要补充的是你的代码为什么不起作用。在使用calc进行加减时，需要在运算符前后都有空格。

来自MDN文档:

+ 和 - 运算符必须始终被空格所包围。例如 calc(50% -8px) 的操作数将会被解析为百分比后面跟着一个负长度，这是一个无效的表达式，而 calc(50% - 8px) 的操作数是一个百分比后跟着一个减号和长度。更进一步，calc(8px + -50%) 被视为一个长度后面跟着一个加号和一个负百分比。 * 和 / 运算符不需要空格，但为了保持一致性，添加空格是允许和推荐的。

- Brendan

Answer 5

如果计算问题仅在生产环境（缩小过程中）发生，请检查您的缩小器。我们发现默认的C#缩小器（大约3年前，2019年左右）在计算函数上失败...导致类似的问题。

对于我们来说，从默认的VS2017 C#缩小器切换到SquishIt解决了这个问题。其他缩小器也解决了这个问题，但SquishIt最终成为我们尝试过的“赢家”。

祝一切顺利，编码愉快， Michael M.

- Michael M.