Question

我遇到了这个页面CSS LINK 我忍不住喜欢这个想法来计算不同单位的结果...... 但我试过这个：

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

但它不起作用......任何人都有任何想法如何工作，或为什么这不起作用？

Answer 1

jQuery支持calc（）。我已经多次使用过这个：

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

Answer 2

jQuery不支持calc()值，也不支持任何当前浏览器。

点击此处比较：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

在你的例子中，你可以只使用内部元素上的边距：

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

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

这样，.elem将是100％ - 20px宽。

Answer 3

CSS3的某些部分得到了很好的支持。其他部分则不是。这就是为什么它被分成了various stages of agreement and implementation中的模块。即使拥有完整的CSS3规范，我们还有很长的路要走，更不用说广泛的浏览器支持了。

所以CSS Level 3选择器是最稳定的规范，已经制作了推荐并且已经被很多浏览器和其他工具实现（尽管如此，所有主流浏览器都需要一段时间来支持它）。其他几个PR和CR在最新的浏览器中都有足够的支持。

但“CSS3值和单位”仍然只是一个早期工作草案，并且很可能在达到推荐标准之前发生重大变化。实际上，由于草案是在几年前开始的，因此没有浏览器实现calc()，此时此功能看起来不太可能成为标准。如果你想保持良好支持的领域，你需要坚持使用CSS 2.1。

与此同时，必须使用嵌套元素，边距和填充来说100%-20px之类的内容。

Answer 4

Ravi verma's answer是正确的。

我想补充的是您的代码无法正常工作的原因。使用calc进行加法和减法时，您需要在前面有空格并继续运算符。

来自the MDN docs：

+和 - 运算符必须始终用空格包围。例如，calc（50％-8px）的操作数将被解析为百分比，后跟负长度，无效表达式，而calc的操作数（50％ - 8px）是百分比，后跟减号和长度。更进一步，calc（8px + -50％）被视为长度，接着是加号和负百分比。 *和/运算符不需要空格，但允许添加它以保持一致性。

jquery CSS calc（）函数

4 个答案: