CSS全般

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が文法的に正しいのかチェックして結果を教えてくれます。

教訓

七度尋ねて人を疑え

ハイ、すみません。

当サイトのおすすめ記事

パソコン 1

当サイトは約5年間、さくらのレンタルサーバで運用させて頂きました。 何かトラブルがあったわけではないのですが、WordPressの表示速度を速くしたくてSSD搭載のレンタルサーバーで運用してみることに ...

プログラミング 2

Contents1 SQLでIFを使わずに条件分岐する1.1 1.テーブルとデータの準備1.2 2.条件を分岐させて検索1.3 3.解説 SQLでIFを使わずに条件分岐する SQLでIFを書けばWHE ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

Contents1 SQLServerでテーブル型を戻り値とする関数を作る1.1 テーブル型を戻り値とする関数の作成1.2 呼び出しかた SQLServerでテーブル型を戻り値とする関数を作る SQL ...

5

Contents1 アフィリエイトで即効成果を出す1.1 自分で買えば確実に成果が上がる1.2 A8.netでは自分で購入してもOKなものがある1.2.1 A8.netにサイトを登録する1.2.2 承 ...

-CSS全般
-, ,

Copyright© ソフトウェア開発日記 , 2017 All Rights Reserved.