我已经在最新版本的 Firefox、Chrome、IE 11 中对其进行了测试。在这些浏览器中,当您使用 CSS calc()
函数计算例如宽度
。据我所知,我已经正确应用了它。作为引用,您可能需要检查
http://www.sitepoint.com/css3-calc-function/
为什么这不起作用?
div {
background-color: blue;
height: 50px;
width: calc(100%-250px);
}
<div></div>
演示:
http://codepen.io/anon/pen/wazZWm
http://jsfiddle.net/h5mzcow1/
编辑:
是的,这个问题在许多编辑过程中发展成为重复,但我仍然认为它应该保留在这里,因为它比例如 CSS calc() not working 更能说明问题。 .另外,恕我直言,答案要好得多。
这是因为您必须在 +
或 -
运算符之间放置一个空格 才能使其正常工作。
div {
background-color: blue;
height: 50px;
width: calc(100% - 250px);
}
<div></div>
来自 MDN 文档:
Note: The +
and -
operators must always be surrounded by whitespace.
The operand of calc(50% -8px)
for instance will be parsed as a
percentage followed by a negative length, an invalid expression, while
the operand of calc(50% - 8px)
is a percentage followed by a minus
sign and a length. Even further, calc(8px + -50%)
is treated as a
length followed by a plus sign and a negative percentage. The *
and /
operators do not require whitespace, but adding it for consistency is
allowed, and recommended.
Source: MDN
W3C Documentation