CSS 缩小和捆绑在 calc 中将 0px 替换为 0，因此内容无法正确呈现

Posted 2023-02-23

【中文标题】CSS 缩小和捆绑在 calc 中将 0px 替换为 0，因此内容无法正确呈现

【英文标题】：CSS minification and bundling replaces 0px with 0 in calc, so content doesn't render properly

【发布时间】：2014-12-17 01:20:13

【问题描述】：

我正在使用来自 MVC 5.1 站点的 Microsoft.AspNet.Web.Optimization (1.1.3) 来捆绑和缩小我的 CSS，它在发布模式下将 0px 的值替换为 0，这会导致呈现问题。是否有可能以某种方式阻止这种行为？

这个css

最小宽度：-webkit-calc((240px + 0px + 550px + 0px + 240px + 0px));

替换为：

最小宽度：-webkit-calc((240px + 0 + 550px + 0 + 240px + 0));

【问题讨论】：

这将是一种解决方法，但是您真的需要实际进行仅涉及常量的计算吗？您不能提前这样做，并通过评论记录该值是如何达到的吗？

感谢您的回复，我使用singularitygs (vai SASS) 作为我的网格系统，并且添加了这个css，所以除了更改网格系统之外我无法轻易更改。

0% 显然在calc 中是允许的，并且您的缩小器希望不要管它，所以如果您可以安排将它而不是0px 放出来，您可能会走运。跨度>

我想知道为什么优化器没有用1030px 替换整个东西，但这可能只是我。

今天遇到了完全相同的问题，将 0px 更改为 0% 效果很好（0px 是 SASS 混合参数的默认值，如果您想知道的话）

【参考方案1】：

鉴于 Compass 将 SASS 编译为 CSS 时 css 已经缩小，我选择删除转换。

private static void DontMinifyStyleBundles(IEnumerable<Bundle> bundles)

    // SASS is already minified by compass at build time and the default asp.net minification 
    // causes 0px in calc() to be set to 0 which causes rendering problems.
    foreach (var bundle in bundles)
    
        bundle.Transforms.Clear();