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