てんぽ: CSSレイアウトの定石 WinIE6バグ回避法

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

CSSレイアウトの定石 WinIE6バグ回避法

2006年03月21日(火)

CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。

とりあえずこれくらいのことに気をつけていれば、そこそこ大丈夫です。その他細かいバグはケースバイケースで対処するしかないです。 「CSSハック」はこれらの条件を守れない場合の最後の手段として使ってください。 あとは仕様を正しく理解しているかどうかですね(それが一番大変だったりしますが)。

#83
カテゴリ:HTML・CSS
タグ[ CSS IE ]

同じカテゴリの記事

(7件)

:Re: CSSレイアウトの定石 WinIE6バグ回避法

IE対応の定石、勉強になりましたm(_ _)m
参照元のサイトは「なんでうまくいかないんだああ!」と詰まったときにお世話になっていますが、2chが有益無益含めた情報のるつぼであることを実感します。

>フロートに後続するボックスの幅がフロートに合わせて短縮される
いわゆる「IE専用」ブログに、この手の表示状態をよく見かけるのですが…
正常な表示の方が一見変に見えますが、先日みりばーるさんが書かれた「floatは回り込みではない」を読めばよくわかりますね。

最近アップしたテンプレでは、記事をテーブル風にfloatさせたレイアウトを作るところで
「widthとpaddingを同時に指定できない」「floatと同じ方向にmarginを指定できない」という二つの縛りにかなり悩まされました。「FC2BLOG Designers」でやっていなかったら投げ出してたかもしれません(^^;
やっぱりCSSの知識を深めるには、いろいろなレイアウトに挑戦して経験を重ねるのが大事なんですね。

  • 2006年03月21日(火)13:45:03
  • URL
  • 編集
みりばーる:フロートのバグ回避法

>floatと同じ方向にmarginを指定できない
実は左フロートがふたつ連続しているなら、後ろの左フロートの左marginは指定値どおりになります。
また、フロートにdisplay:inlineをつければ何故かバグが回避できるようですよ。
仕様9.7 'display','position'及び'float'の間の関係によれば、フロートのdisplayは強制的にブロックレベルになるので弊害もないと思います。

>いろいろなレイアウトに挑戦して経験を重ねる
そうですね、FC2ブログに来るまではネガティブマージンをやろうなんて思いませんでしたし。

  • 2006年03月22日(水)15:06:28
  • URL
  • 編集
CSSについて:CSSについて

初コメです(^^)
最近CSSを覚えはじめたのですけども、
CSSって本当に難しいですよね…

私だけかもしれませんが、
全然前に進みません(T_T)

もしよければ、たまに
ここで質問とかさせてただいても
宜しいでしょうか?

  • 2008年11月19日(水)21:27:09
  • URL
  • 編集
橘夢来人:CSS

CSSわかると便利ですね。ここでいろいろ勉強させてもらいました。ありがとうございます。

  • 2008年12月22日(月)20:55:29
  • URL
shutennnyoku:Re: CSSレイアウトの定石 WinIE6バグ回避法

ありがどうね

IE6のバグが多すぎて、
絶対配置を設定する場合、コンテナの高さは奇数であれば、底部に1PX空隙があります

  • 2009年10月15日(木)17:52:25
  • URL
  • 編集
-:承認待ちコメント

このコメントは管理者の承認待ちです

  • 2013年05月10日(金)17:56:31
-:承認待ちコメント

このコメントは管理者の承認待ちです

  • 2013年05月11日(土)01:11:30
コメントの投稿

トラックバック(1件)

http://mb.blog7.fc2.com/tb.php/83-9f2a00ed

[情報]CSSまとめ

解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。CSSを使わなくてもHTMLで直接デザイン*3できなくはないですが、CSSを使った方が標準的で効率的です。例えば100枚のHTMLファイルを一

  • 2007年03月24日(土)22:15:47
  • from 萌え理論Blog

<<メモ:MacIE5バグつぶし | へんな習慣>>

Utilities

おすすめ

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

広告