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表示
こちらはFirefoxの正常な状態。

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

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

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

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

  • コメント(0)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読