てんぽ: 不可解です

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

不可解です

2005年06月02日(木)

できれば使いたくないCSSのプロパティといえば、positionとfloat。 [chameleon]はこれらを使いまくってるのでIEのバグにひっかかり過ぎ。忘れないうちにメモしておきます。 今回はじめて知ったバグも多い。

背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)
widthを明示すれば回避可能とはいえ、ボックスサイズの解釈の違いにより他のブラウザとの調整が面倒。
:visited擬似クラスの宣言が詳細度を無視してカスケード処理される(5.x/6.0)
色指定が激しく面倒なことに。
アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0)
とりあえずmargin-bottomを0にすると直った。
フロートを含むボックスのマージンが無視される(5.x/6.0)
widthを明示すれば回避可能とはいえ、以下略。
line-heightの値によってはマージンが指定どおりの値にならない(N7)
マージンが0のブロック要素を縦に隣接させてもFirefoxで1pxくらいの隙間ができたのは多分これのせい。line-heightやfont-size、paddingの値を調節すると隙間をなくすことができる(line-height:1.4だと駄目だけど1.41だとOKとか)。まさに1pxも隙がないデザイン(違う)。
フロート直後の要素でclearをすると隙間ができる(IE6)
フロートした要素の直前の要素にmargin-bottomがあり、フロートした要素の直後の要素でclearをすると、clearした要素とフロートした要素の間に前述のmarginの分だけ隙間ができるっぽい。 clearした要素にwidthを指定すれば直る。

とりあえずWinIE 6、Firefox 1、Opera 7.5、Netscape 7.1では大丈夫だけど、MacIE 5とかでは崩れるかもしれない。

#18
カテゴリ:HTML・CSS
タグ[ CSS メモ ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/18-7567d47b

<<共有テンプレート[chameleon] | 1. タブであること>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。