IEでcssが正常に読み込まれなかったときの解決策

2016.02.15
HTML&CSS

html5で作成したWebサイトの表示を確認した際に、IEではcssが正常に読み込まれないエラーが発生しました。IEのバージョンに関わらず、一部のcssが効いていない状態でした。解決策を調べてみたので、備忘録としてまとめておきたいと思います。

<html>タグの修正

今回cssの効かなかったhtmlファイルの中身は、ざっくり書くと下記のような感じです。

<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <!-- bodyの中身 -->
    </body>
</html>

まず、冒頭の<html>を<!DOCTYPE html>に変更するとcssが正常に適応されました。
<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言するために記述するDOCTYPE宣言です。これが抜けていたため、cssがうまく適用されなかったようです。

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <!-- bodyの中身 -->
    </body>
</html>

それでもダメだったとき

上記の修正をしても、IE11でcssが読み込まれないままでした。IEでの表示が互換モードになっていることが原因のようです。

常に標準モードになるように、下記を<head>内に追加します。

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>タイトル</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <!-- bodyの中身 -->
    </body>
</html>

これでIE11でもcssが正常に読み込まれるようになりました。

参考

IE対策：互換表示させない。 | Qiita