Question

我最近在网站上遇到了一个问题，网页上的样式确实搞砸了，但仅限于IE浏览器。我的老板告诉我这可能是因为正在渲染的CSS Bundle包含来自不同目录的CSS文件，所以我检查了它。它类似于下面的内容：

    bundles.Add(new StyleBundle("~/path/subpath/all").Include(
                 "~/path/subpath/filename.css",
                 "~/path/subpath/filename1.css",
                 "~/path/subpath/filename2.css",
                 "~/path/subpath/filename3.css",
                 "~/path/subpath/anotherSubPath/filename.css",
                 "~/path/subpath/anotherSubPath/filename1.css",
                 "~/path/aDifferentSubPath/filename.css"));

他说Bundling无法像这样工作，你必须只有Bundle中同一目录的文件，所以我把它们拆分成如下所示：

bundles.Add(new StyleBundle("~/path/subpath/all").Include(
             "~/path/subpath/filename.css",
             "~/path/subpath/filename1.css",
             "~/path/subpath/filename2.css",
             "~/path/subpath/filename3.css"));

bundles.Add(new StyleBundle("~/path/subpath/anotherSubPath/all").Include(
             "~/path/subpath/anotherSubPath/filename.css",
             "~/path/subpath/anotherSubPath/filename1.css"));

bundles.Add(new StyleBundle("~/path/aDifferentSubPath/all").Include(
             "~/path/aDifferentSubPath/filename.css"));

这在IE中解决了我们的问题。好的，现在问我的问题：

我的老板是否正确？你能不捆绑来自不同文件夹的文件吗？
如果他是对的，为什么这只会在IE中破解？为什么你必须只捆绑来自同一目录的文件？
如果他不正确可能是什么问题？为什么拆分捆绑已修好了？

Answer 1

当您的css文件使用静态文件（如图像，字体等）的相对路径时，捆绑名称和文件夹时会遇到常见问题。

例如，你有：

 bundles.Add(new StyleBundle("~/path/subpath/all").Include(
             ...
             "~/path/subpath/anotherSubPath/filename1.css"));

并在filename1.css中使用background: url(image.jpg)，通常此图片与filename1.css ~/path/subpath/anotherSubPath/image.jpg位于同一文件夹中。使用下面的bundels使浏览器查找不存在的文件~/path/subpath/all/image.jpg。也许这就是分离捆绑的原因。

Answer 2

对于IE的旧版本，至少＆lt; 10有一些已知的限制

IE可以加载的CSS和脚本文件的数量 - 如果您以Debug模式运行网站，捆绑包不会捆绑，这可能会出现问题。

如果情况并非如此，那么你在一个文件中有超过4,096个选择器???

Internet Explorer CSS limits

Answer 3

你的老板听起来很棒！首先，CSS路径是相对于CSS文件的，所以我怀疑这就是他建议你改变它的原因。

但CSS长度也可能是一个问题，因此可能是这种情况下的根本原因。

不幸的是，在浏览器中需要注意一些怪癖，比如这个CSS设备，或苹果设备上的图像尺寸（之前遇到过精灵表）。你的老板听起来像是那种充满活力的人，他会知道这一点。

将文件捆绑在不同的目录中？

3 个答案: