【问题标题】:The curious case of calc(25% - 1px) that equals 24% [duplicate]calc(25% - 1px) 的奇怪案例等于 24% [重复]
【发布时间】:2016-08-24 10:35:43
【问题描述】:

我最近遇到了一个非常有趣的错误(?),我的 css 包括:

width: calc(25% - 1px);

计算出来的css显示:

width: calc(24%);

中就是这种情况

火狐(版本 44.0.2),

Chrome(版本 49.0.2623.112 m),

和 IE11(版本 11.0.9600.18205)

有人知道为什么会发生这种情况吗?

编辑:同样的事情发生在calc(25% - 1em)calc(25% - 1rem)

编辑 2: 这是一个示例 https://codepen.io/martindoychinov/pen/wGYxOO

编辑 3: 显然是因为我使用 LESS

【问题讨论】:

  • 这里有两个问题?原始容器的大小是多少,当您使用 em 或 rem 而不是 px 时会发生什么
  • 你需要演示。
  • 正如@Paulie_D 所说。尝试放一个demo:jsfiddle.net
  • 我刚刚添加了我的示例并且发生了完全相同的问题!您的示例显示正确,但我哪里出错了? 编辑: 刚刚更新,显然是因为我使用 LESS

标签: css less


【解决方案1】:

您在示例中使用 LESS 作为 CSS 预处理器。

你需要转义表达式

width: calc(~'25% - 1px');

【讨论】:

  • 非常感谢您的解决方案!
猜你喜欢
  • 2014-07-23
  • 2015-09-26
  • 2023-04-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-21
  • 1970-01-01
相关资源
最近更新 更多