ホームページ > 記事 > ウェブフロントエンド > IE6_html/css_WEB-ITnose で二重マージンの問題が発生するのはどのような状況ですか?
IE6_html/css_WEB-ITnose で二重マージンの問題が発生するのはどのような状況ですか?
- WBOYオリジナル
- 2016-06-24 11:41:301007ブラウズ
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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。