アクセス解析での皆さんのブラウザの使用率を考慮して IE 中心にサイトのデザインを行っているのですが、最近は Opera や FireFox などの使用率も増えてきていますので、ある程度デザインが同じっぽく見えるようにしてみました。
世間では外部スクリプトを駆使したり、@importを使ったり、他にも色々な方法があるようです。しかし当サイトでは対応を分ける部分も三箇所くらいと少ないので、今回はこちらのページにあるように CSS のみで簡単に出来る方法で細工してみました。
最初に IE 以外のブラウザ用の値を設定して、あとから IE 用の設定は頭に「* html 」をつけてから宣言して上書きしています。
＊例＊
* html #endmenu {
padding-top: 5px;
}
これで IE6（Win）、FireFox1.06、Opera8.01 だとほぼ似たようなレイアウトで表示されるようになっているかと思います。
※2005/09/19追記
はてなRSSでの試行錯誤にも書きましたが、IEでは文書型宣言を最初に書かないと挙動が違ったり、XML宣言を最初に書くと挙動が違ったり、ということがあります。まずはそちらを試してみてから、それでも切り分けが必要な場合、CSSのハックをした方がいいでしょう。
ついでにCSSの参考になりそうなサイトをまとめておきました。かなりの量ではありますが、一通り目を通しておいてどのようなバグがあったりするのか等を把握しておいた方が、あとあと楽ではないかと思います。
とほほのスタイルシート入門
HTML版「スタイルシートWebデザイン」
CSS Dencitie
CSS2リファレンス
CSSバグ辞典
CSS_Hacks
HTML,CSSバグ＆回避法リスト
コメント