IE7のCSSバグ（border付きbox内のfloatでmarginが効かない）

今日ちょっとひっかかったIE7のCSSバグをメモしておきます。

どうやらborder付きのbox内に2重に入れ子にしたfloatさせたboxの親要素（ややこしい！）のmarginが効かなくなるようです。
口で言い表しづらいので、以下のソースを見てください。

XHTML

1. <div id="page">
2. <div id="content">
3. <ul>
4. <li id="hoge">hoge</li>
5. <li id="huga">huga</li>
6. </ul>
7. </div>
8. </div>

こうなっている時、#contentにborderが設定されると、UL要素のmarginが効かなくなります。

CSSサンプルは以下の通り。

CSS

1. * {
2. list-style: none;
3. margin: 0;
4. padding: 0;
5. line-height: 1;
6. }
7.  
8. div#page {
9. width: 350px;
10. }
11.  
12. div#content {
13. border: 1px solid red;
14. }
15.  
16. ul {
17. margin: 50px;
18. }
19.  
20. ul li {
21. float: left;
22. margin-right: 5px;
23. font-size: 50px;
24. }
25.  
26. li#hoge {
27. background: blue;
28. }
29.  
30. li#huga {
31. background: green;
32. }
33.  
34. /* clearfix */
35. ul:after {
36. display: block;
37. clear: both;
38. height: 0;
39. visibility: hidden;
40. content: ".";
41. line-height: 0;
42. }
43. ul {
44. display: inline-table;
45. min-height: 1%;
46. }
47. /* for macIE \*/
48. * html ul {
49. height: 1%;
50. }
51. ul {
52. display: block;
53. }
54. /* end of for macIE */

こちらはFirefoxの正常な状態。

IE7のバグ再現状態。marginが出ていない。

今回は取り急ぎpaddingで処理しました。

対処方法としては、borderのあるbox内で入れ子のfloatを使わない、とかそういった前提条件的な対処になってしまいそうです。

うまい対処方法がありましたら、教えていただけると幸いです。

• CSS
• IE7
• バグ

• コメント(0)
• トラックバック(0)
•