サポート » 使い方全般 » IE8以前でCSSが読み込まれない

  • 解決済 tagosaku

    (@tagosaku)


    何となく気になって、自分のWordpressサイトをIE7で表示させてみたところ、CSSが一切読み込まれていないようでした。

    CSSファイル先頭行で「@charset “utf-8”;」を記述していますし、CSSファイルの文字コードはUTF-8で保存しています。

    header-cleanerやキャッシュ系プラグインも念のため止めてみましたが、解消しません。

    テーマはRefineSnowを使っているのですが、試しにRefineSnowを使っている他の方のサイトをIE7で読み込んでみたところ、CSS3は効かないものの、CSSファイル自体は正常に読み込まれているようです。

    IE8、IE9でも確認を行ったところ、どうやらIE8以前でCSSの読み込みが出来ていないようです。

    ChromeやFireFoxでは正常に読み込めています。

    どなたか、上記現象の心当たりはありませんでしょうか?

15件の返信を表示中 - 1 - 15件目 (全23件中)
  • Shoki Hirayama

    (@shokemyster)

    差し押さえなければ、サイトURLを教えていただけますか?

    トピック投稿者 tagosaku

    (@tagosaku)

    invisign様
    ありがとうございます。

    こちらが問題のサイトです。
    http://tagosaku01.com/

    よくよく調べてみると、CSSファイルの読み込みが出来ていないのではなく、CSSファイルに記載されている内容の大半が有効になっていないだけのようです。

    例えば、3カラムの配置等は有効になっています。

    ですが、ヘッダーバナーの表示や、各コンテンツエリアの背景色設定などは無視されているようです。

    ちなみに、サイドバー等のタイトル部分で使われている画像は、スタイル調整用のCSSファイルとは別にテーマが内部的に持っている「style.php」というファイルで設定されているのですが、そちらは問題なく効いているようです。

    천궁 메텔

    (@digitmaetel)

    style.php が優先されているようです。
    カスタムcssのオプションとか用意されていませんか。
    オール・イン・ワン・タイプのテーマだと推察します。そう言うタイプはアップデートで変更箇所がまた有効にならなくなったりします。

    トピック投稿者 tagosaku

    (@tagosaku)

    digit@maetel様
    ご回答ありがとうございます。

    Refineのスタイル設定は以下の3つで構成されているようです。
    ・style.php
    各バーやタイトル部分背景画像設定、サイズ設定等、恐らくはレイアウトの根本に関わる設定。

    ・style.css
    レイアウト設定の一部(例えばサイドバーのfloat設定等はここに記述されています)や、スタイル設定等

    ・custom.css
    独自スタイルを作成する場合に使用。初期状態ではコメントのみが記述された空ファイル。オプションで有効・無効を切り替えるわけではなく、常に読み込まれる。

    以上、3つのファイルで構成されているのですが、style.cssの内容の一部は、IE7でも有効になっているようで、例えばstyle.cssを削除した場合は、3カラム表示が崩れ、サイドバーなどが全て縦に並んでしまいました。

    ただ、その一方で、style.css内でヘッダーエリアの表示位置が設定されているのですが、そちらはIE7では有効になっていません。
    (htmlソースでは、ヘッダーエリアの記述が末尾にきているので、CSSによる調整が効かない場合はヘッダーエリアの表示がページ末尾にきます)

    プラグインとの何らかの干渉も疑って、全プラグインを停止させてみましたがダメでした。
    他、何か考えられることはないでしょうか。

    천궁 메텔

    (@digitmaetel)

    テーマオプションに、custom.cssが用意されている場合。
    それが優先されるようです。

    css が反映されるかされないか。レイアウトに関する部分では、テーマが用意しているパターンから選ぶのが良いでしょう。

    トピック投稿者 tagosaku

    (@tagosaku)

    digit@maetel様

    custom.cssは常に読み込まれる仕様なので、切り替えることはできませんし、custom.cssでレイアウトに関わるような記述はしていません。

    念のため、custom.cssが読み込まれないようリネームしてみましたが、状況は変わらずです。

    また、同じテーマを使っている他の方のサイトを旧バージョンIEで見ても正常に表示できているので、テーマの問題ではないと思っています。

    久保 綾

    (@ayahime)

    お邪魔します。(o*。_。)oペコッ

    W3C Markup Validation Service」を利用して、コードエラーなどを確認してみると原因が分かるかと想います。
    綾もテーマを変更する時は、ブラウザてテストしますけど、ブラウザによって表示が変わるのを最小に抑える際に、上記サービスでコードチェックをして修正をかけたりしています。

    根本的な解決方法ではないですけど参考なればと想います。
    (o*。_。)oペコッ

    Shoki Hirayama

    (@shokemyster)

    なるほどですね。
    多分ですが、IE7はHTML5の定義に対応していなかったような覚えがあります。

    <!DOCTYPE html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    に変えてみるといけるかもです。
    IE7は大分前から疎遠してますのでなんとも言えませんが・・・

    トピック投稿者 tagosaku

    (@tagosaku)

    久保 綾様
    ご回答ありがとうございます。

    現在、ご紹介いただいたサービスを利用して修正中です。
    テーマのphpプログラムにより生成されている部分でのエラーが多いですが、同じテーマ利用者のサイトはIE7でも表示されているので、そこはあまり気にしなくていいのかな、とも思っています。

    今のところ、解決できていません。

    invisign様
    ご回答ありがとうございます。

    試してみましたがダメでした。

    IETesterという、IEの各バージョンでの表示を確認できるツールを利用してチェックしているのですが、読み込まれたhtmlソースはチェックできるものの、CSSがどのように読み込まれているのかが確認できません。

    IE互換のテストツールで、読み込まれたCSSがチェックできるものはあればデバッグしやすいのですが・・・

    Google Chrome付属のDeveloper Toolsみたいな感じをイメージしています。

    천궁 메텔

    (@digitmaetel)

    動作環境(システム要件)
    WordPress 3.4.1以上、PHP 5.2.4以上、MySQL 5.0以上

    とテンプレートの条件はあるだけで、IE7 に対応して開発されているかは明示してないですね。
    わたしなら IE7 対応外とするところです。

    tagosaku さんが『読み込ませたいCSS』を custum css に書き込んでみて下さい。

    それに、
    テンプレート配布元に問い合わせフォームがあるのでそちらに尋ねられるのが本筋ではないかしら
    お問い合わせ

    また、プラグインに head cleaner をお使いですね。
    テンプレートの javascript が一番最後に回っていますが。

    「W3C Markup Validation Service」を利用して、コードエラーが多いのは好ましくないですね。

    トピック投稿者 tagosaku

    (@tagosaku)

    digit@maetel様

    前述していますが、同じテーマを使っている方々のサイトは問題なく表示されていますので、私の編集が原因と考えられます。

    Custum.cssにstyle.cssの内容を全て移してみましたが、解決しませんでした。
    そもそも、style.cssの内容が全て無効になっているわけではなく、一部は有効になっているようなので、ファイル単位で読み込まれていないわけではありません。

    header cleanerに関しては最初に書きましたが、無効状態でのチェックも行っています。

    천궁 메텔

    (@digitmaetel)

    header cleanerに関しては最初に書きましたが、無効状態で

    も元に戻るものではないでしょう。
    キャッシュファイルも同様のように。

    こうしたケースの場合、わたしなら
    プラグイン等インストールしていない環境で確認します。
    テンプレート配布元に問い合わせても、使用環境の相違を言われるでしょうから。

    同じテーマを使っている方々のサイト

    も同じプラグイン等インストールして、カスタマイズも同じであれば的はずれでしょうけど。

    スタイルシートは誤記載がないということは前提ですが。

    トピック投稿者 tagosaku

    (@tagosaku)

    digit@maetel様

    も元に戻るものではないでしょう。

    プラグインが元のPHPに手を加えているわけではありませんから、元に戻ると思うのですが。
    一応無効状態で読み込まれたhtmlコードも確認していますが、無効にすることでheader cleanerによる変更が戻っていることを確認しています。
    (Chrome付属のDeveloper Toolsで、読み込まれたCSSの内容まで確認しています)

    キャッシュに関しても、キャッシュを削除する・しないはプラグインの作り次第だと思いますが、元のPHPコードに手を加えるわけではないのでプラグインを無効にすればキャッシュを参照しなくならないのでしょうか?

    Shoki Hirayama

    (@shokemyster)

    BrowserStackで、IE7のFirebug使ってHTML/CSSのデバックしてみましたが、HTML5系統のタグが一切認識されていない感じでした。

    試しに、

    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    を、<head>タグ内のどっかに入れてみてください。
    これも前回と同じく、多分・・・ですが、html5shivはIEでは必須ですので、多分・・・

    トピック投稿者 tagosaku

    (@tagosaku)

    invisign様
    ご回答ありがとうございます。
    ですが、そちらの宣言はもともとテンプレートのヘッダー部分に記述されております。
    (IE9以下に対して適用されるようです。)
    一応試しにinvisign様からご提示頂いた宣言もheadタグ内に貼り付けてみましたが、ダメでした。

    お手数をお掛けしてすみません。

    ところで、「modern.IE」とても便利ですね。
    まだチラッとしか見ていませんが、解決の糸口になるかも知れません。

15件の返信を表示中 - 1 - 15件目 (全23件中)
  • トピック「IE8以前でCSSが読み込まれない」には新たに返信することはできません。