IE6 で二重マージンの問題はどのような状況で発生しますか:
問題の原因を知ることによってのみ、問題が発生する前に意識的に回避したり、問題をできるだけ早く発見したりすることができます。以下に、IE6 ブラウザでダブルマージンの問題が発生する状況を簡単に紹介します。
以下の例を見てください:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent { width:200px; height:200px; border:1px solid blue;}.children { float:left; width:100px; height:100px; border:1px solid red; margin-left:10px;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html> 上記のコードでは、子 div の左マージンが 2 倍になっています。つまり、物体の浮上方向とマージンの方向が一致すると、マージンが２倍になる現象が起こります。
別の例を見てみましょう:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent { width:400px; height:200px; border:1px solid green; overflow:hidden;}.left { width:100px; height:50px; border:1px solid blue; float:left; margin-left:10px;}.middle { width:100px; height:50px; border:1px solid blue; float:left; margin-left:10px;}.right { width:80px; height:50px; border:1px solid red; float:left; margin-left:10px;}</style></head><body><div class="parent"> <div class="left"></div> <div class="middle"></div> <div class="right"></div></div></body></html> 上記のコードでは、IE6 ブラウザーでは最初のサブ div のみに二重マージンがあり、2 番目と 3 番目のサブディビジョンには二重マージンがないため、最初のフローティングのみが得られます。同じ行に div を指定すると、マージンが 2 重になる場合があります。
上記 2 つの現象に基づいて、オブジェクトの浮動方向がマージン方向と一致し、それが同じライン内の最初の浮動オブジェクトである場合にのみ、二重マージンが生成されると結論付けることができます。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/499.html
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
