CSS:IEへの対応。widthとpadding、borderを一緒に指定しない。
JavaScript・XHTML・CSS (43 items)
2004年10月31日
約2ヶ月前のHeartfieldさんの記事。
読んだ時、当サイトも同じなので修正しなければと思っていたのですが、
中々レイアウトを直す気にはなれず、そのままにしてました。
しかし、ここ最近やる気が出てきたので、本日修正しました。
読んだ時、当サイトも同じなので修正しなければと思っていたのですが、
中々レイアウトを直す気にはなれず、そのままにしてました。
しかし、ここ最近やる気が出てきたので、本日修正しました。
スタイルシート修正
・・・
参考にさせていただいたのは主に、「ADP: IE6のwidth解釈バグ対処法」です。このサイトは他にもとても有用な情報があって、「もう少し出会いが早ければ…」と切ない気持ちになったほどです。ということでありがとうございました。
ここでも言われていますが、ＩＥのCSS読み込みバグを回避するために「widthとpadding、borderを一緒に指定しない」という大原則があるんですね。知りませんでした。当サイトもものの見事に一緒に指定してました。
以前までは、当サイトもIEで見ると各記事のヘッダー部（タイトル）の辺りに、
微妙な隙間が出来ていて、非常に不細工でした。。
原因は、上記のように書かれているように、
見事にwidthとpadding、borderを一緒に指定していた事にありました。
ちなみにIE以外では、その隙間は表示されていませんでしたが。
そこで、widthとpadding、borderの記述を見直し、
更にCSSを再度見直して、かなり無駄を省きました。
で、ついでに色合いも見直しました。
まあ、この辺は随時気分次第で変わる可能性大ですがね。
微妙な隙間が出来ていて、非常に不細工でした。。
原因は、上記のように書かれているように、
見事にwidthとpadding、borderを一緒に指定していた事にありました。
ちなみにIE以外では、その隙間は表示されていませんでしたが。
そこで、widthとpadding、borderの記述を見直し、
更にCSSを再度見直して、かなり無駄を省きました。
で、ついでに色合いも見直しました。
まあ、この辺は随時気分次第で変わる可能性大ですがね。
前の記事 次の記事