人気ブログランキング | 話題のタグを見る

since 2004.10.23
要素のwidth:異なる定義に翻弄される私!
 「css2.0における要素のwidth定義はIEにおけるのそれとは異なっており、IEは正式にcss2.0をサポートしていない」───このことへの無知がスキン編集においてレイアウト崩れを引き起こす最大の原因の1つとなっていると思う。実際私はつい最近まで、この問題の存在すら知らなかった。
 偶々tableを利用しない段組を他のブログで行ってみて、IE上では綺麗に見えるのに、firefoxでは横方法レイアウトがガタガタになってしまう苦い経験を経て、その原因がwidthの定義違いにあることをある方から示唆され、はじめてこの問題に直面したのだ。
 ・・・ここで注意したいのは,ボックスの大きさは要素の大きさ以上になるということである。ボックスの幅は次のように定義される。

(box width) = (margin-left) + (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width) + (margin-right)

 width は要素の内容の幅である。(Step forward CSS - Section 12

 この式で見ると「要素の内容幅」であるwidthはpadding幅もborder幅も含まない純粋に「要素の内容」幅である。ところが、IEが解釈する「要素width」はこの式と異なるというのだ。
 IEが解釈する要素width=(border-left-width) + (padding-left) + (内容width) + (padding-right) + (border-right-width)

 かくして横方向レイアウトは何らかの形で要素widthを指定している限り、IEとmozilla系のブラウザでは異なってしまうわけだ。
by hkom007 | 2004-11-11 13:16 | HTML/CSS
<< (久々の投稿)tableを使わ... いやはや・・。FireFox ... >>
検索
以前の記事
最新のトラックバック
カテゴリ
ライフログ
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧