Mozilla系ブラウザでCSS読込エラー

「SEOとCSS」で紹介した様に、現状ではホームページの作成には、コンテンツの構造化を「HTML」でおこない、デザインやレイアウトを「CSS」でおこなうことが多くなってきています。

この「CSS」によるデザイン・レイアウトでよく言われているのが、ブラウザ間の表示の差異についてです。
ブラウザのマーケットシェア的に、現状では「ＩＥ」が圧倒的に優位にたっているため、ターゲットブラウザを「ＩＥ」にしてサイト構築をおこなう場合が多いと思うのですが、意外と「ＩＥ」と同じ様な「CSS」の解釈をしてくれるのが「Opera」、ついで厄介なのが、「Mozilla」系の「Netscape」と「Firefox」です。
細かい表示の差異などの解説は、それ専門のホームページやブログにお任せするとして、最近サイトの構築をおこなった時に「Mozilla」系ブラウザで閲覧した場合、全く「CSS」を反映しないといった現象に遭遇したので、それについて回避方を紹介します。

この現象に遭遇するのは、「Apache」など「WEBサーバ」のバージョンが比較的古くかつ、「Mozilla」系のブラウザで閲覧した場合に限る様です。要するに同じサイトを「ＩＥ」、「Opera」で見た場合にはちゃんと「CSS」を反映しているが、「Netscape」、「Firefox」で見た場合には「CSS」が全く反映されていないということです。

原因は「WEBサーバ」が「CSS」に適した「MIMEタイプ」をブラウザに送信しておらず、ブラウザが「CSS」として認識できなかったからです。
もし、「.htaccess」が設定可能な「WEBサーバ」の場合、以下の様に「MIMEタイプ」を指定してあげれば解決することができます。

AddType text/css .css
AddHandler server-parsed .css

もし、「.htaccess」の設定ができない「WEBサーバ」の場合は、サーバ管理者に「CSS」の「MIMEタイプ」を「WEBサーバ」の設定に追加する様お願いしてください。
いずれにしても「Mozilla」系は、本当に規格に厳格ですね～と感じる一件でした。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選