Google ChromeでCSSが反映されない場合の対処

404NOT FOUNDの画像 CSS
スポンサーリンク

Google ChromeでCSSが適応されない

Internet Explorer では問題なくCSSが反映されるが、
Google ChromeだとCSSが反映されない事象が発生しました。

判明すればごく当たり前のことなのですが、
解決までに半日以上の時間を費やしてしまったので、
自戒の念を込めて記事にしておきます。

Internet Explorerでは問題ない

以下のCSSですが、Internet Explorerでは全く問題なく
tableのtdタグの背景色が指定した色に変わります。

<html>
    <head>
        <style type="text/css">
            .no1_color { background-color:#fffacd; border-color:#0000ff};
            .no2_color { background-color:#ccffcc; border-color:#0000ff};
            .no3_color { background-color:#ff4500; border-color:#0000ff};
        </style>
    </head>
    <body>
        <table border="1" class="table_blue_stripe">
            <tr><td class="no1_color">背景色は1番目の色</td></tr>
            <tr><td class="no2_color">背景色は2番目の色</td></tr>
            <tr><td class="no3_color">背景色は3番目の色</td></tr>
        </table>
    </body>
</html>

テキストをコピーして適当な名前で保存してInternet Explorerで
見てください。
各行の背景色がCSSで指定した色に変わっています。
全く問題ないです。(実は問題あるのですが・・・)

Google Chromeでは背景色が変わらない

さて、同じHTMLをGoogle Chromeで見て下さい。

なんと・・・2行目と3行目の背景色がCSSで指定しているにも
関わらず変化しません。
困った。

ここから苦闘の始まりです。

指定している色がまずいのか?

まず考えたのは指定している色が「Internet Explorer」では
表示できるが「Google Chrome」では表示できない色なのでは
ないかと。

そこで、CSSをちょっと変えて

<html>
    <head>
        <style type="text/css">
            .no1_color { background-color:#fffacd; border-color:#0000ff};
            .no2_color { background-color:#fffacd; border-color:#0000ff};
            .no3_color { background-color:#fffacd; border-color:#0000ff};
        </style>
    </head>
    <body>
        <table border="1" class="table_blue_stripe">
            <tr><td class="no1_color">背景色は1番目の色</td></tr>
            <tr><td class="no2_color">背景色は2番目の色</td></tr>
            <tr><td class="no3_color">背景色は3番目の色</td></tr>
        </table>
    </body>
</html>

と全部同じ色にしてやりました。
結果は・・・やはり2行目と3行目の背景色は変化しません。
残念。

色ではなくて順番か?

使えない色ではなくて指定の順番かと思い

background-color:#fffacd; border-color:#0000ff

の順番を入れ替えて

border-color:#0000ff;background-color:#fffacd

なんてして見ましたが結果は一緒・・・。

よーく見ると不要なものがついてんじゃん

その後も色々試しましたがどうしてもダメ。
Internet Explorerは平気で色を変えてくれるがGoogle Chromeはダメ。

で、もう色々やるのは諦めてしばらくソースをじっと眺める。
すると・・・
おかしいじゃん、なんか要らんもんあるじゃん。
そう、各文の最後にあるこれ「;」。
なんじゃこれ?

ということで急いで削除。

<html>
    <head>
        <style type="text/css">
            .no1_color { background-color:#fffacd; border-color:#0000ff}
            .no2_color { background-color:#ccffcc; border-color:#0000ff}
            .no3_color { background-color:#ff4500; border-color:#0000ff}
        </style>
    </head>
    <body>
        <table border="1" class="table_blue_stripe">
            <tr><td class="no1_color">背景色は1番目の色</td></tr>
            <tr><td class="no2_color">背景色は2番目の色</td></tr>
            <tr><td class="no3_color">背景色は3番目の色</td></tr>
        </table>
    </body>
</html>

結果は無事、各行の背景色が反映されました。
なんと

.no1_color { background-color:#fffacd; border-color:#0000ff;}

と「}」の前に「;」書いたつもりが「}」の外に・・・。
たったこれだけ。そうたった・・・。

一瞬でも「Google Chromeのバグじゃね?」と疑った私が
悪うございました。
すみません。

で、これからは書いたCSSが文法的に正しいのかチェックしてから
使うようにしようと、CSSの文法チェックをしてくれるサイトがないか
探しました。
W3C CSS検証サービス
と言うサイトは作ったファイルを指定したり、直接貼りつけたりすることで
CSSが文法的に正しいのかチェックして結果を教えてくれます。

教訓

七度尋ねて人を疑え

ハイ、すみません。

タイトルとURLをコピーしました