internet-explorer - CSSファイルを適切に組み合わせる方法

Question

私は約10個のcssファイルを持っています。リンクタグを使用してそれらを次々とリンクすると、つまり

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

すべてのブラウザですべてが適切にロードされます。ただし、すべてのファイルを 1 つのファイルにまとめると、CSS が IE で壊れます。

FF、クロム、サファリで正常に動作します。一連の警告だけでcssを検証しようとしました

何かご意見は ？

Answer 1

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 2

これは、CSS ファイルの連結方法によって異なるようです。これは指定されていませんが、BOM でエンコードされた UTF-8 のファイルでテストしました (たとえば、UTF-8 として保存するときにメモ帳によって生成される)。そのようなファイルが、バイト シーケンスを単純に連結する方法を使用して連結されている場合、これは BOM U+FEFF が最初だけでなく、結果ファイル内にも表示されることを意味します。これにより、CSS ルールの間に表示され、構文エラーが発生します (これは W3C CSS Validator によって報告されるはずですが、警告の中でエラー メッセージが認識されなかった可能性があります)。ブラウザーでは、この構文エラーにより次の CSS ルールが無視されるようです。

したがって、これは推測にすぎませんが、元の CSS ファイルの一部の先頭に表示される規則が IE レンダリングには不可欠であるが、他のブラウザーでは必須ではない場合、症状は理解できます。その場合の解決策はもちろん、BOM なしでファイルを連結することです。

Answer 3

条件付き IE タグを使用して、IE の奇妙な例外を処理できます...