ホームページ > 記事 > ウェブフロントエンド > IE6 ブラウザーでの 3px ソリューション_html/css_WEB-ITnose
IE6 ブラウザーでの 3px ソリューション_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:371136ブラウズ
IE6 ブラウザーでの 3px の解決策:
IE6 での 3px の問題は主に不規則な記述によって引き起こされます。たとえば、左右に 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:300px; height:300px; background-color:red;}.left { float:left; width:100px; height:100px; background-color:green;}.right { width:100px; height:100px; background-color:blue}</style></head><body><div class="parent"> <div class="left"></div> <div class="right"></div></div></body></html> 上記のコードでは、左側の div は浮動小数点であり、2 番目の div は非浮動小数点数です。これにより、IE6 では 3px の問題が発生します。実際、この問題自体は、標準ブラウザでは、フローティング後に最初の div がドキュメント フローから分離され、後続の div がこの div の位置を埋めてしまい、その表示効果が非標準であることが原因で発生します。 Web ページが最初の div で 2 番目の div をカバーしますが、これは標準的な書き方ではありません。解決策は、2 番目の div も float にすることです。コードを次のように変更します:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent { width:300px; height:300px; background-color:red;}.left { float:left; width:100px; height:100px; background-color:green;}.right { float:left; width:100px; height:100px; background-color:blue}</style></head><body><div class="parent"> <div class="left"></div> <div class="right"></div></div></body></html> 元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/497.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。