將文件捆綁在不同的目錄中？

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的舊版本，至少<10有一些已知的限制

IE可以加載的CSS和腳本文件的數量 - 如果您在Debug模式下運行站點，而捆綁包未捆綁，則可能會出現問題。

如果不是這樣的話，那么你在一個文件中有超過4,096個選擇器???

Internet Explorer CSS限制

Answer 3

你的老板聽起來很棒！ 首先，CSS路徑是相對於CSS文件的，所以我懷疑這就是他建議你改變它的原因。

但CSS長度也可能是一個問題，因此可能是這種情況下的根本原因。

不幸的是，在瀏覽器中需要注意一些怪癖，比如這個CSS，或Apple設備上的圖像大小（之前遇到過精靈表）。 你的老板聽起來像是那種充滿活力，開啟的人。