IEでたまにCSSの読み込みに失敗し、デザインが崩れる

自作したCSS,HTML,Javascriptファイル等をサーバーに設置し、ウェブサイトを製作してテストを何回も行っていると、たまにCSSが読み込めずデザインが崩れてしまうことがあります。

どのような原因によっておこるものなんでしょうか？そして、これはサーバー、クライアントのどちらかで対策ができるのでしょうか?

どなたか知っている方がいらっしゃいましたらご教授ください。

[情報を追記しました 05/11 17:31]
とりあえずコメントで頂いた内容に基づいて現在調査をしています。

・開発環境
Tomcat
Servlet
・サーバー
AWS
・OS
Cent OS
・使用したブラウザ
IE 8 ~ 11
Firefox(最新)
Chrom(最新)

・使用したCSS
Bootstrap v3.0.2

・発生手順
IE11を使ってクライアントからJavascriptを使ってサーバーのAPIを呼び、DB処理をした後、
簡単なresponseをもらって。別ページに遷移した際にページが崩れました。今のところ
2度発生しただけで、他のバージョンやブラウザで発生は見られません。
(テスト不足もありますが、メインはfirefoxで確認しているのでIEではあまり確認していません。）

・読み込み失敗したHTMLのヘッダー

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8" />
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7	<title>xxxxxxx</title>
8	<!-- Bootstrap -->
9	<!--<link href="content/bootstrap.min.css" rel="stylesheet">-->
10	<link href="bootstrap.min.css" rel="stylesheet">
11	<link href="mixins.css" rel="stylesheet">
12	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
13	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
14	<!--[if lt IE 9]>
15	  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
16	  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
17	<![endif]-->
18	<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->
19	<script src="jquery.min.js"></script>
20	<script src="bootstrap.min.js"></script>
21	<script src="xxxxxxx.js?date=2015xxxxxxx"></script>
22</head>

行動規範の内容に同意します

回答3件

本当にいろんな可能性があるのでなんとも言えないのですが、
IEだけの問題だとすれば、質問に IEのバージョンも記載されたほうがいいと思います。
IEの独自仕様としては、キャッシュの扱いが独特ですでにキャッシュされているものについては
読み込み済みイベントを発火させない場合があったりします。などと言っても問題は特定されにくいので、
次のようなチェックをすることをオススメします。

CSSファイルを別立てしたことによる問題か、CSSの内容に問題があるのかを切り分けるために、cssの内容を、一旦HTMLの styleタグ内に入れてしまって、HTMLのみでテストしてみる。
ここで画面が崩れれば、CSS/HTMLの内容の問題で、既に回答にあるようにIEのQuirksモード(IE7,IE8互換モード) と CSS/HTMLの記載が合っていないことが問題。HTMLのDOCTYPEについても調査が必要になります。
画面の崩れが起きなかった場合、CSSに@import タグなどCSS内での別リソースのロードがあるかどうか、あれば一旦なくして(全部とりこんで)調査。なければ CSSファイルのダウンロードに失敗していることになります。
CSSのダウンロードに失敗している場合、ダウンロードのタイミングが遅すぎたか、サーバ側がリソースを返せなかったかのどちらか。サーバ側が返せなかったとしたら、mime設定がルースなケースが一番多い。大穴としては、サーバ側が多重化されていて、当該cssファイルを置いていないサーバに運悪く当たっちゃった場合。(これも結構あります。)
全く違う観点としては、CSSが何らかの理由で動的に作成されているケース。この場合はサーバ側処理の問題ですね。

というわけで、ごめんなさい分かりません！

投稿2015/05/11 07:49

okayu3

総合スコア200

makiikeda1216

2015/05/11 08:26

これだけの情報で考えられるケースを搾り出していただきありがとうございます！自分はサーバーにあまり詳しくないのでサーバーの多重化などはさきほど調べて知りました。サーバーに関しては現在AWSを利用しているのですがサーバーの多重化などのカスタマイズや設定はしていません。でも大本で多重化を行っていてもおかしくないですよね。とりあえずもう少し詳しく内容を追記したいと思います！

行動規範の内容に同意します