internet-explorer - 如何正确组合 CSS 文件

Question

我有大约 10 个 css 文件。当我使用链接标签一个接一个地链接它们时，即

<link rel="stylesheet" type="text/css" src="..." 

一切都在所有浏览器中正确加载。但是，当我将所有文件串成一个文件时，css 在 IE 中中断。

在 FF、chrome 和 safari 中运行良好。我什至尝试验证 css 只是一堆警告

有什么想法吗 ？

Answer 1

听起来这取决于连接 CSS 文件的方式。这没有指定，但我测试了使用 BOM 编码的 UTF-8 文件（例如，在保存为 UTF-8 时由记事本生成）。如果使用简单连接字节序列的方法连接此类文件，这意味着 BOM U+FEFF 也出现在结果文件中，而不仅仅是在开头。这使它出现在 CSS 规则之间，导致语法错误（应该由 W3C CSS 验证器报告，但可能在警告中没有注意到错误消息）。在浏览器中，这个语法错误似乎会导致下一个 CSS 规则被忽略。

所以这是推测性的，但如果出现在某些原始 CSS 文件开头的规则对于 IE 渲染是必不可少的，但在其他浏览器上不是，那么这些症状是可以理解的。那么解决方案当然是在没有 BOM 的情况下连接文件。

Answer 2

您可以使用条件 IE 标签来处理 IE 的奇怪异常...

Answer 3

您是否尝试过使用 import 并使用以下结构制作一个名为 global.css 的 css：

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

/* All three CSS files above will be loaded from
   this single document. */