IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。
今日ファイルを整理していたら、以前のレイアウトソリューションのいくつかが長い間フォルダーに眠っていたことに気が付きました。古いものを掘り出しました。幸運にも、CSSPLAY の古いエンジニアと Web マスターがこのエフェクトを実装するのを見ることができたのは特筆すべきことであり、これはかなり早い段階で与えられたに違いありません。
では、早速ソースコードをご紹介します。
IE6 レイアウト、CSS 実装の奇妙な機能をトリガーして利用します。
<スタイルタイプ="text/css">
.ie6-out{
_左マージン:900px;
_ズーム:1;
}
.ie6-in{
_position:相対;
_float:左;
_左マージン:-900px;
}
#最小幅{
最小幅:900px;
背景:#ccc;
行の高さ:200px;
_ズーム:1;
}
</スタイル>
<div class="ie6-out">
<div class="ie6-in">
<div id="min-width">IE6 では、コンテナーは min-width 効果をシミュレートします。必要に応じてブラウザウィンドウのサイズを変更し、「幅の表示」ボタンをクリックしてください。 </div>
</div>
</div>
CSS 実装のデモンストレーション:
コードボックスを実行

="text-align:center;} .ie6-out{ _margin-left:900px; _zoom:1; } .ie6-in{ _position:relative; _float:left; _margin-left:-900px; } #min-width{ min-width:900px; background:#ccc; line-height:200px; _zoom:1; } </style> </head> <body> <div class="ie6-out"> <div class="ie6-in"> <div id="min-width">ie6 では、コンテナーはシミュレートされた min-width 効果を実現します。必要に応じてブラウザウィンドウのサイズを変更し、「幅の表示」ボタンをクリックしてください。 </div> </div> </div> <input name="" type="button" onclick="alert('コンテナの幅=' document.getElementById('min-width').clientWidth 'px' '\n\n' 'ビューポートの幅=' (document.documentElement.clientWidth||document.body.clientWidth) 'px');" value="ビューの幅" /> </body> </html>

[Ctrl A すべて選択ヒント: 最初にコードの一部を変更してから、実行を押すことができます]
拡張デモ:
コードボックスを実行

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> css _Margin-Left：_ float： <body> <div class = "ie6-out"> <div class = "ie6-in"> aa </div> </div> <div class = "ie6-out"> <div class = "ie6-in"> aa <div id = "min-width"必要に応じてブラウザウィンドウのサイズを変更し、「幅の表示」ボタンをクリックしてください。 </div> </div> </div> <input name="" type="button" onclick="alert('コンテナの幅=' document.getElementById('min-width').clientWidth 'px' '\n\n' 'ビューポートの幅=' (document.documentElement.clientWidth||document.body.clientWidth) 'px');" value="ビューの幅" /> </body> </html>

[Ctrl A すべて選択ヒント: 最初にコードの一部を変更してから、実行を押すことができます]
CSS 式
——コンテナの最小幅を実現するためにこの方法を使用すると、不可解なクラッシュに悩まされ、結局無駄になってしまう人が多いと思います。
ここで指摘しておくべき点が 2 つあります。
1. IE6 標準モードと Quirk モードでビューポートを表す要素は異なり、前者は <html>、後者は <body> です。
2. IE6 - 上記の 2 つの異なるモードでは、含まれるコンテンツがオーバーフローすると、割り当ての判断で無限ループが発生するという異なる現象が発生します。少し長く聞こえるかもしれませんが、自分で練習してみてください。
最小幅を実現するための CSS 式ソースコード: <style type="text/css">
本文{ テキスト配置:center;}
#最小幅{
最小幅:900px;
_width:式((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");
行の高さ:200px;
背景:#ccc;
}
</スタイル>
<div id="min-width">IE6 では、コンテナーは min-width 効果をシミュレートします。必要に応じてブラウザウィンドウのサイズを変更し、「幅の表示」ボタンをクリックしてください。 </div>
デモ：
コードボックスを実行

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :必要に応じてブラウザウィンドウのサイズを変更し、「幅の表示」ボタンをクリックしてください。 </div> <input name="" type="button" onClick="alert('コンテナの幅=' document.getElementById('min-width').clientWidth 'px' '\n\n' 'ビューポートの幅=' (document.documentElement.clientWidth||document.body.clientWidth) 'px');" value="ビューの幅" /> </body> </html>

[Ctrl A すべて選択ヒント: 最初にコードの一部を変更してから、実行を押すことができます]
上記の 2 つのソリューションは、IE6 標準モードと Quirk モードの両方で実装できます。また、IE Expression では、このアプリケーションで CPU 効率の問題は見つかりませんでした。

<<: MySQLパスワードを変更するいくつかの方法

>>: js 正規表現の先読みと後読み、および非キャプチャグループ化