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

Google ChromeでCSSが適応されない

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

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

Internet Explorerでは問題ない

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

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

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

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

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

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

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

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

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

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

色ではなくて順番か?

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

の順番を入れ替えて

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

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

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

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

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

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

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

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

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

教訓

七度尋ねて人を疑え

ハイ、すみません。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • 14 follow us in feedly

関連記事

no-img

スタイルシート(CSS)で<h1>から<h6>タグにアンダーラインを引いてみる

少し使用しているテーマの<h1>~<h6>タグをスタイルシート(CSS)を使ってでアンダーラインを引

記事を読む

no-img

CSSで印刷されないボタンを作る

印刷されないボタン作成 HTMLで作成した画面をブラウザー表示し、 その画面に印刷ボタンを設けて

記事を読む

a0001_013635

CSSで複数のclassを同時に指定する方法

CSSで複数のclassを同時に指定する HTMLで1つの要素に同時に複数のスタイルを指定したい場

記事を読む

no-img

スタイルシート(CSS)で背景色を変更する

スタイルシート(CSS)を使って背景色を変更します。 背景色を変更するには「background-

記事を読む

no-img
CSSで印刷されないボタンを作る

印刷されないボタン作成 HTMLで作成した画面をブラウザー表示し、

a0001_013635
CSSで複数のclassを同時に指定する方法

CSSで複数のclassを同時に指定する HTMLで1つの要素に同時

no-img
スタイルシート(CSS)で背景色を変更する

スタイルシート(CSS)を使って背景色を変更します。 背景色を変更す

no-img
スタイルシート(CSS)で<h1>から<h6>タグにアンダーラインを引いてみる

少し使用しているテーマの<h1>~<h6>タグをスタイルシート(CSS

→もっと見る



PAGE TOP ↑