CSS和捆绑IE浏览器的限制 [英] CSS Bundling and Internet Explorer's Limit
问题描述
当我加入jQuery的用户界面将捆绑我结束了：
bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
〜/内容/主题/基/ jquery.ui.core.css
〜/内容/主题/基/ jquery.ui.resizable.css
〜/内容/主题/基/ jquery.ui.selectable.css
〜/内容/主题/基/ jquery.ui.accordion.css
〜/内容/主题/基/ jquery.ui.autocomplete.css
〜/内容/主题/基/ jquery.ui.button.css
〜/内容/主题/基/ jquery.ui.dialog.css
〜/内容/主题/基/ jquery.ui.slider.css
〜/内容/主题/基/ jquery.ui.tabs.css
〜/内容/主题/基/ jquery.ui.datepicker.css
〜/内容/主题/基/ jquery.ui.progressbar.css
〜/内容/主题/基/ jquery.ui.theme.css
Internet Explorer已经31样式表的额度将加载，其中jQuery的已12添加在衣复位，基地和字体我在15的样式表是已经与全没有加载的网站样式或插件样式表。
显然，当它被捆绑，因为只产生一个样式表一切工作正常。我的第一直觉是使用使用@Import的那些，但是，导致捆绑到<一个href=\"http://stackoverflow.com/questions/11970293/mvc4-bundling-css-failed-unexpected-token-found-import\">fall在或不运行如下。
什么是这种情况的最佳解决方法，不是更少样式表等？
我现在的解决方案是一个＃如果DEBUG 构造，但有没有更好的办法？
＃如果DEBUG
bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
〜/内容/主题/基/ jquery.ui.all.css））;
＃其他
bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
〜/内容/主题/基/ jquery.ui.core.css
〜/内容/主题/基/ jquery.ui.resizable.css
〜/内容/主题/基/ jquery.ui.selectable.css
〜/内容/主题/基/ jquery.ui.accordion.css
〜/内容/主题/基/ jquery.ui.autocomplete.css
〜/内容/主题/基/ jquery.ui.button.css
〜/内容/主题/基/ jquery.ui.dialog.css
〜/内容/主题/基/ jquery.ui.slider.css
〜/内容/主题/基/ jquery.ui.tabs.css
〜/内容/主题/基/ jquery.ui.datepicker.css
〜/内容/主题/基/ jquery.ui.progressbar.css
〜/内容/主题/基/ jquery.ui.theme.css））;
＃万一
如果你真的需要所有的主题只是包括在调试和 jquery.ui.all.css 释放模式。
bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
〜/内容/主题/基/ jquery.ui.all.css））;
这个方式在调试模式下你得到一个CSS文件，并在释放模式，你得到一个单一的，COM pressed CSS文件，缓存头提供服务。
When I add jquery ui to the bundle I end up with:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"
Internet explorer has a limit of 31 style sheets it will load, of which jquery has taken 12. Add in yui reset, base and fonts I'm at 15 style sheets already, with none of the sites styles or plugin style sheets loaded in.
Obviously, everything works fine when it is bundled as there is only one stylesheet generated. My first instinct was to use the ones that use @Import but that causes bundling to fall over or not minify.
What is the best workaround for this, other than fewer style sheets?
My current solution is a #if DEBUG construct but is there a better way?
#if DEBUG
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.all.css"));
#else
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
#endif
If you really need all the themes simply include the jquery.ui.all.css in DEBUG and RELEASE modes.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.all.css"));
This way in DEBUG mode you get a single CSS file and in RELEASE mode you get a single, compressed CSS file served with cache headers.
这篇关于CSS和捆绑IE浏览器的限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
