如何正确组合CSS文件

Question

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

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

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

在FF，铬和野生动物园中工作正常。我甚至尝试过验证css只是一堆警告

有什么想法吗？

Answer 1

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

Answer 2

您是否尝试过使用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. */

Answer 3

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

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