问题标签 [css-calc]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - calc() 在 CSS 中不计算，浏览器中的差异
我创建了两个表，我想width根据第一个表的大小设置右边的 3 列。我试过calc((100% - 200px)/3)了，但它不适用于所有浏览器：Firefox 40 失败，IE11 失败，Chrome 44 似乎做得对。我该怎么做才能calc()在所有浏览器中都能理解？还是我应该忘记它？
我创建了一个更简单的版本，但同样失败了。
同样，与calc()：
CSS：
html - IE 中的 Css calc() 行为
我的目的是将内部div放在容器的中间。
小提琴中的例子 ：
calc()主要问题是由于使用 css规则，内部 div 在 IE 中向右移动（Firefox 和 Chrome 显示它很好） 。如果我在上面的示例中取消注释恒定宽度width: 156px，它就可以工作。
但它不与calc(). 有什么办法可以为 IE 修复它吗？
PS 我知道 IE8 及更低版本不支持calc()，我在 IE9 中尝试过。
css - 如何在 calc 中使用 Stylus 变量？
在 Stylus 中，如何在calc表达式中使用变量？
例如，以下内容不起作用（arrow-size作为变量）：
css - css calc 无效的属性值
有人能告诉我为什么这个 CSS calc 函数不起作用吗？当我在 Chrome 上检查元素时，它显示“属性值无效”。
css - 使用 calc 获取滚动
我已经尝试了很多方法来使用 css calc 和表格布局来获取滚动条。下面是我的小提琴。任何帮助是极大的赞赏。
JSFIDDLE：http: //jsfiddle.net/y3U8F/124/
在这里，我想要滚动条#content
HTML：
CSS：
css - 为什么必须在 Calc() 方法中用空格包围 + 或 -？
最近我开始在 CSS 中使用 calc(...) 方法。我很快了解到诸如： 之类的代码width: calc(100%-2)将不起作用，尽管在-运算符前后添加空格将解决问题并且 calc 方法将正常工作。
在做了一些研究之后，我发现多篇博客文章都提到了空格是必需的，许多人甚至指出了规范（CSS3 8.1.1），其中指出：
此外，+ 和 - 运算符的两边都需要空格。（ * 和 / 操作符可以在它们周围没有空格的情况下使用。）
现在，很明显，规范告诉我们这些运算符必须用空格包裹，但为什么呢？我已在规范中进一步阅读（通过第 8.1.2-4 节），如果在这些附加部分中进行了解释，我不理解其中的原因。
简而言之，有人可以解释为什么指定它calc(100% - 1)甚至calc(100%/2)是可接受的语法但不是calc(100%-1)吗？
css - 在 css calc 函数中使用模数
有没有办法在 css calc 函数中使用或实现模运算符？
我知道有 mod 运算符并且 IE 支持它，但是其他浏览器呢？
例如
css - Firefox：calc() 无效的属性值
我有一个元素的行高设置为calc()：
演示：http ://codepen.io/Ghodmode/pen/vLxZZd
它在 Chrome 中运行良好，但 Firefox 的开发者工具说它是一个无效的属性值。
我确定我遗漏了一些应该很明显的东西。
仅供参考：
html - CSS calc 百分比宽度和除法
我有菜单，它是一个包含三个列表项的列表：
ul 元素的宽度会随着您调整浏览器的大小而变化，我正在尝试使用 calc 来锻炼项目的宽度，以使它们相等。第一个和第三个列表项有一个 2px 宽的左右边框。
在 Chrome 开发工具中，menu_container 的宽度是 636px。如果我检查第一个列表项并执行width: 100%它显示 640px。但如果我这样做calc((100% - 12px) / 3)，它会显示 212px 的宽度。为什么这不是 (640 - 12) / 3 = 209.333？