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

IEで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

Share

関連記事

  • Home
  • Html&css
  • IEでcssが正常に読み込まれなかったときの解決策
Page Top