CSSハック一覧でバグ対応｜副業するサラリーマン

「Firefoxでは綺麗に表示されるのに、IE6ではズレまくる」といった、特定のブラウザでのレンダリングがおかしいときがあります。

こんなときに「CSSハック」を利用すれば、ブラウザごとにCSSを適用できます。仮に「*html {width 200px;}」と記述すれば、バグだらけのIE6以下だけに「横幅を200px」と指定することができるのです。

原理はシンプルで「*html」はIE6以下だけが理解できてしまうからです。要するにバグにはバグで対応してしまうということです。そういったCSSハックが各ブラウザにいくつか存在します。

対応ブラウザ	記述
IE7のみ	*:first-child+html element {property : value;}
IE6以下	*html element {property : value;}
IE6以外	html > body element {property : value;}
IE6、IE7以外	html>/**/body element {property : value;}
Safariのみ	/\/ html:\66irst-child {property : value;} /* end */
Operaのみ	* + html:first-child body {property : value;}
MacのIEのみ	/\/// selector {property : value;}/*/

このブログのテンプレートは全て自作ですが、MacのSafariで閲覧すると、文字が一回り大きくなって、記事一覧のタイトル名がはみ出たりします。

確かにCSSハックを使うと即時に対応できます。IEはバグを放置して、バージョンアップを優先する傾向があるので、CSSハックを使うデザイナーさんはたくさんいます。

ただ、ブラウザがアップグレードされてバグが解消されたときは、逆にバグってしまいますので、私はCSSを自作するときはCSSハックは使わないです。「少しくらいズレてもいいかな」という発想です。

中古ドメインは効果があるのか？
前の記事

CSSハック一覧でバグ対応