ホームページ > ウェブフロントエンド > htmlチュートリアル > IE6 ブラウザーでの 3px ソリューション_html/css_WEB-ITnose

IE6 ブラウザーでの 3px ソリューション_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:41:37
オリジナル
1211 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート