问题标签 [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.

0 投票
1 回答
2979 浏览

css - 在 FireFox 29.0.1 中无法使用 css calc()

css 中的函数 calc() 在 firefox 29.0.1 中不起作用,其他浏览器正在运行。

0 投票
1 回答
6154 浏览

css - CSS3 calc() 验证:值错误:宽度解析错误

我需要验证使用以下代码的 CSS3 文件:

它返回此错误:

值错误:宽度解析错误 - 312px)

我最后的选择是在页面加载和窗口调整大小时使用 Javascript 函数来获取宽度值,如果可以使用 CSS3(仅适用于 IE8 或更早版本)。

0 投票
2 回答
34860 浏览

css - 计算不起作用,即 11

经过研究,我确认 calc 应该适用于 ie8+,但它不适用于我。

这是我制作的一个 JS 小提琴:

http://jsfiddle.net/75tzyLoo/

这是代码: HTML:

CSS:

这是我看到的输出:用于计算的 JS Fiddle 输出不起作用

我究竟做错了什么?

0 投票
1 回答
259 浏览

css - CSS Calc((100%/5)+10px) 不工作

好吧,所以在我的 CSS 中,我正在尝试进行数学计算 calc((100%/5)+10px); 当我这样做时它不起作用。当我做 calc(100%/5); 它工作得很好。我需要做什么才能使 +10px 正常工作?

0 投票
1 回答
1052 浏览

css - 最大高度,在 Safari 中使用 Calc vh

对于 Safari,以下内容不起作用,谁能指出我做错了什么?

Safari 单独支持所有方法。-webkit-calc 也无济于事。

谢谢!

0 投票
2 回答
3058 浏览

css - Chrome 37 计算四舍五入

http://jsfiddle.net/yz8cwj3a/

结果:http: //i.imgur.com/DYor2yb.png

这个小提琴显示了 Chrome 37 的一个问题。在具有小数像素的元素上使用 calc(100% - 10px) 函数,它总是向下舍入。这会导致奇怪的事情。

在示例中,外部 div 的宽度为 50.5px。两个内部 div 具有 calc(100% - 10px) 和 10px 作为宽度。即使这应该是总共 50.5,它仍然显示红色背景。

Chome 37 中似乎引入了问题。有谁知道这个问题是否已经被报告和/或是否会得到解决?

编辑:我从评论中了解到这个问题已经存在了很长时间。有没有(跨浏览器)巧妙的方法来解决这个问题?

0 投票
1 回答
9654 浏览

css - CSS calc() 舍入

这个问题类似于Chrome 37 calc rounding

但真正的问题要复杂一些,并且提供的解决方案不适用于这种情况:

Chrome 中的结果:http: //i.imgur.com/vNvFfHC.jpg

再解释一下:outerDiv 的宽度取决于随机文本量,该文本位于另一个 div 中,该 div 也在 outerDiv 内部。左右 div 包含一个图像,因此它们的宽度是静态的。

我们目前的解决方案是将 calc 更改为: calc(100% - 40px + 1px ); 有没有更好的解决方案?

0 投票
0 回答
227 浏览

css - CSS Calc ios8 不工作

嗨!我真的对这个错误感到困惑!我有一个表,其中 1 列宽度是使用以下 css 动态创建的:

160px 是所有其他列一起,所以其余可能的设备宽度是针对这个计算的列!这在 ios7 下工作正常,但由于 ios8 看起来 calc 函数什么都不做???

0 投票
1 回答
249 浏览

css - Css calc() 函数,运算符 +

我想用 calc() 函数在 CSS 中做一些事情,但我有一个问题。我尝试执行此操作并在控制台中出现错误:

控制台显示此消息:

ParseError:第 24 行第 3 列 C:path\translation.less 中无法识别的输入:

23

24.标题{

25

进程以退出代码 1 结束

然而,如果我这样做,我没有错误:

有人可以通过更改操作员来帮助我并让我理解为什么会出现此错误?

谢谢

0 投票
1 回答
409 浏览

html - 使用 calc() 的 div 间距偏移

我有 3 个垂直行,使用calc()在我的屏幕上划分 我正在使用 JS 设置每种框类型的高度

这是设置每个块高度的javascript,它将高度设置为等于宽度,在长盒子的情况下,它将高度设置为宽度的一半。

我在行中的列之间有一个奇怪的偏移量(见截图)

您可以在此处查看页面http://cloudlabme.webhosting.be/4sr 在此处输入图像描述

这是两个垂直行的 HTML

这是我的 CSS

谢谢!这是在杀死我的大脑!