CSSテクニックコミュのボックスのマージンが二倍になる

はじめまして。
いつも勉強させていただいてます。
今までDWでテーブルに頼っていたので最近本格的にHTMLとCSSを学び始めています。

早速質問ですがレイアウト用に作ったボックスに"float:left"を適用し、"margin-left:10px"を適用したのですがブラウザで確認すると倍の20pxになってしまいます。"margin-left;5px"にすると10pxになるので今のところこれで放置しています…。調べてみたら「http://cssbug.at.infoseek.co.jp/detail/winie/b107.html」に該当するバグを思われるのですが結局回避方法としてはどうなんでしょうか？IEのみで確認しているので他のブラウザでどうなっているか不安です。初歩的な質問とは思いますがよろしくお願いします。

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 07月08日 02:32

display:inline; にするか、CSSハックしてIEだけmargin-left: 5px;にする、等がありますね。(というか、それ以外思いつかない…)
ちなみに、float:left、margin-left:5pxにすると、IE以外ではそのままmargin-left:5pxで表示されます。

[2] mixiユーザー 07月08日 02:54

ご返答ありがとうございます。
となるとやはりアンダースコアハックで回避するしかないんですかね…。CSS VALIDATORでエラー出ないようにと考えたんですがそれに固執しすぎちゃ駄目ですよね…。何分趣味の範囲ですので気にしなくてもいいとは思うんですが。ちなみにIE以外ではそのまま表示されるんですね。情報ありがとうございます！

[3] mixiユーザー 07月08日 11:22

floatしたボックスの左マージンを指定する場合は、ボックスを入れ子にして制作してます。内側のボックスのパディング（orマージン）でマージンを確保すればValidもOKですよ。

[4] mixiユーザー 07月08日 16:27

わぁ！！これは目から鱗です！すごい！たしかにエラーも出ないし表示も正しいです。バグとうまく付き合わなきゃダメだと思った矢先の事だったので衝撃です。入れ子とは考えもしなかったです…。ありがとうございます！

[5] mixiユーザー 07月09日 11:54

スターハック + ボックスモデルハックなら css だけのハックで validator でもエラー吐きませんよ。

/*\*/
* html ●○ {
voice-family:"\"}{\"";
voice-family:inherit;
margin-left:5px;
}
/**/

win IE 5.x でもこの症状がでるならボックスモデルハック要りません。

ログインすると、みんなのコメントがもっと見れるよ