【问题标题】:CSS calc(percent - pixels) being interpreted as calc(percent - percent) by browserCSS calc(percent - pixel) 被浏览器解释为 calc(percent - percent)
【发布时间】:2017-08-01 22:36:43
【问题描述】:

好的,所以这可能是我做过的一件非常简单的事情(其中一天),但我终其一生都无法弄清楚这一点。

长话短说, 在我的 main.scss 中:

.test{
    width: calc(100% - 50px);
}

在我自动编译的 main.css 中(在代码编辑器甚至在线文件管理器中查看):

.test{
    width: calc(100% - 50px);
}

然而,在浏览器中显示不正确,经过检查,它已在某处转换为:

.extra-test{
    width: calc(50%);
}

关于什么可能导致这种情况的任何想法?

(使用最新版本的 Chrome)

【问题讨论】:

  • 听起来你好像在某个地方搞砸了 mixin。如果可以,请尝试查看生成的 CSS 文件的源代码,看看生成了什么?
  • 您是否使用任何 CSS 编译器,例如 LESS?在 LESS 中,您需要使用 ~"calc(100% - 50px)" 来保持字面意思,并跳过 LESS 将其编译到计算中。
  • 您确定您查看的是正确的文件吗? Chrome 不仅会神奇地转换 CSS 文件的内容。
  • @NiettheDarkAbsol 仅使用 SCSS,我检查了它编译的文件是否正确,如我的问题所述。
  • @MarkoGrešak 我有 99% 的把握,服务器上没有其他具有相同名称/代码的文件。并且我正在推送到该文件的更改存在。

标签: php css web concrete5


【解决方案1】:

好的,所以我做了更多的挖掘工作,我们正在使用的 CMS (Concrete5) 正在创建文件的缓存版本(我认为它是使用 LESS 编译的)并提供它而不是文件的原始版本。

所以我将关闭这个问题,因为这似乎是 CMS 的问题。感谢您的帮助,很抱歉浪费您的时间!

编辑:现在已经解决了。对于任何未来的 Google-eers,问题是在 Concrete5 中,我在自定义主题的 header-top.php 文件的顶部保留了 <?php echo $html->css($view->getStylesheet('main.css'))?> 行。我不能 100% 确定该行的作用,但将其更改为 <link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/main.css"> 解决了问题并提供了正确的文件,而不是我认为是 LESS 编译的缓存文件。

【讨论】:

  • 我同意这一点,很高兴我们能够让您走上正轨。但是,我建议学习如何使用 SCSS/LESS,因为它非常有用。唯一需要注意的是知道如何选择性地防止它(就像我之前给出的 ~"calc(100% - 50px)" 示例)
猜你喜欢
  • 2016-10-21
  • 1970-01-01
  • 1970-01-01
  • 2012-11-18
  • 1970-01-01
  • 1970-01-01
  • 2012-05-04
  • 2012-06-06
  • 1970-01-01
相关资源
最近更新 更多