質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.23%

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 12K+

makiikeda1216

score 143

自作した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のヘッダー
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xxxxxxx</title>
    <!-- Bootstrap -->
    <!--<link href="content/bootstrap.min.css" rel="stylesheet">-->
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="mixins.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="xxxxxxx.js?date=2015xxxxxxx"></script>
</head>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

原因はいろいろ考えられますので、まずは症状が発生する範囲を明確にしていくことが必要かと思います。
表題に「IEで」とありますが、IEでのみ、発生しているのですか? もし、FirefoxやChromeでは発生していないなら、サーバ側は疑う必要が少なくなりますね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/11 16:29

    mimeが適切に付与されていない場合に起こることが有るそうなので、その場合はサーバ側修正になりますね。枝刈りのために一度見てみてもいいかもしれません。

    キャンセル

  • 2015/05/11 17:20

    お返事ありがとうございます!
    ちょっと情報が少なかったようなのでもう少し詳しく記載させていただきます!
    とりあえずサーバー側とクライアント側両方可能性があるということですね。。

    キャンセル

  • 2015/05/12 09:54

    表示が乱れたときのTomcatのアクセスログはどうなっていましたか。
    CSSがGETされているはずですが、200 OKですか? 時間がかかっていた形跡などありますか?

    キャンセル

  • 2015/05/12 09:56

    もっというと、静的ファイルまでTomcatで提供するのは、どうなのかな。Tomcatの前にApacheを置いて、WebアプリについてはApacheからmod_proxy_ajpでTomcatに中継しつつ、静的ファイルはApache側に置くように、私ならしますけど。

    キャンセル

0

おそらく、症状からしてHTMLがIEの該当のバージョンに対応していないのが問題かと思います。
まずはデザインが崩れたHTMLソースおよびCSS、JSをどこかに持っていって
検証をすれば問題がクリアになるかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/11 16:31

    たまに、とありますので、例えば Webサーバが負荷分散のために多重化されていて、どれか1つのサーバでの設定が足りてないか、そのサーバで提供しているリソースが変なのかもしれません。うーん やっぱりこの質問だけじゃ分からないですねー

    キャンセル

  • 2015/05/11 17:22

    お返事ありがとうございます!
    IEのバージョンはとても気にしていましたがやはり、それも要因になりかねないのですね。。もう少し自分で時間に余裕があるかぎり引き続き調査してみたいと思います!

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/11 17:26

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる