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">
<tr><td class="no1_color">背景色は１番目の色</td></tr>
<tr><td class="no2_color">背景色は２番目の色</td></tr>
<tr><td class="no3_color">背景色は３番目の色</td></tr>
</table>
</body>
</html>
テキストをコピーして適当な名前で保存してInternet Explorerで
見てください。
各行の背景色がCSSで指定した色に変わっています。
全く問題ないです。（実は問題あるのですが・・・）
Google Chromeでは背景色が変わらない
さて、同じHTMLをGoogle Chromeで見て下さい。
なんと・・・２行目と３行目の背景色が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">
<tr><td class="no1_color">背景色は１番目の色</td></tr>
<tr><td class="no2_color">背景色は２番目の色</td></tr>
<tr><td class="no3_color">背景色は３番目の色</td></tr>
</table>
</body>
</html>
と全部同じ色にしてやりました。
結果は・・・やはり２行目と３行目の背景色は変化しません。
残念。
色ではなくて順番か？
使えない色ではなくて指定の順番かと思い
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">
<tr><td class="no1_color">背景色は１番目の色</td></tr>
<tr><td class="no2_color">背景色は２番目の色</td></tr>
<tr><td class="no3_color">背景色は３番目の色</td></tr>
</table>
</body>
</html>
結果は無事、各行の背景色が反映されました。
なんと
.no1_color { background-color:#fffacd; border-color:#0000ff;}
と「｝」の前に「;」書いたつもりが「}」の外に・・・。
たったこれだけ。そうたった・・・。
一瞬でも「Google Chromeのバグじゃね？」と疑った私が
悪うございました。
すみません。
で、これからは書いたCSSが文法的に正しいのかチェックしてから
使うようにしようと、CSSの文法チェックをしてくれるサイトがないか
探しました。
W3C CSS検証サービス
と言うサイトは作ったファイルを指定したり、直接貼りつけたりすることで
CSSが文法的に正しいのかチェックして結果を教えてくれます。
教訓
七度尋ねて人を疑え
ハイ、すみません。
