2011年1月20日木曜日

たった1行を探すのに苦労した。 img{border: 0px;}

 普段使用しているブラウザーはGoogle Chromeなので、サイト構築の際にもデバッグは主にGoogle Chromeで行っています。本当は圧倒的なユーザー数を誇るInternet Explorerを使用すべきなのだろうが基本的に好きではないので、どうしてもGoogle Chromeを使うようになってしまう。それでも最終リリースや思いついた時はInternet Explorerで確認してみることにする。ブラウザーによっては見え方が微妙に違うことは日常茶飯事であるから気にしないことにしている。気にし始めたらさっぱり作業が進まなくなってしまうのです。私の基準はあくまでもGoogle Chromeであります。
 でもどうしても表示が自分の意図とは大きく違う場合はできるだけ近づけようと努力をします。今回何気なく現在作成中のサイトをInternet Explorerで見てみました。そこで「あれ?!」と思ったのが、画像の表示であります。画像そのものを貼り付けてある場合はなんら問題はないのですが、画像にリンクを指定するとInternet Explorerでは問題が生じます。
a要素にtext-decoration:none;と指定してあるのに、文字列ではアンダラインは消えているのですが、画像の場合は枠が表示されてしまうのです。今回は赤を指定してあったので、画像は赤のラインで縁取りされてしまうのです。これは色にもよりますが、かなり醜いです。どうやったらこの縁取りを取り去ることができるのか、探し回りましたがなかなか見つけることができませんでした。
 探し回ることを3日と1時間23分でとうとう見つけることができました。それが下にあるCSSの1行であります。
 img{border: 0px;}
たったこの1行を書き込むのに要した時間が3日と1時間23分でありますからね。なんだかなあという気持ちであります。もっともこの方法が本当に正しいのかどうかはわかりませんが、今のところはInternet Explorerでの表示で縁取りは消えているようであります。いつもの結果オーライのいい加減なものであります。それにしても「ああーチカレタビー」が実感であります。
コメントを投稿