MSIE 6 の最小幅
-
01-07-2019 - |
質問
とは何ですか 決定的 Internet Explorer 6 で CSS プロパティ min-width を模倣する方法はありますか?試さない方が良いのでしょうか?
解決
foo { min-width: 100px } // for everyone
* html foo { width: 100px } // just for IE
(または、別のスタイルシートを IE に提供します。 条件付きコメント)
他のヒント
(HBoss が提案しているように) 式を使用することもできますが、パフォーマンスが心配な場合は、min-width を適用する要素内に shim を追加するのが最善の方法です。
<div id="container">
The "shim" div will hold the container div open to at least 500px!
You should be able to put it anywhere in the container div.
<div class="shim"> </div>
</div>
#container .shim {
width: 500px;
height: 0;
line-height: 0;
}
これには、セマンティックではないマークアップが少し必要ですが、真のクロスブラウザー ソリューションであり、式を使用するオーバーヘッドは必要ありません。
この記事 Stu Nicholls による CSS Play では、IE、すべてのモード (Quirks など)、さらには IE/Mac で最小幅を達成するためのさまざまな方法が示されています。
先月、私はここで与えられたすべての答えをいじりました。そして、Pretaul のメソッドを試した後 (MSIE 6 の最小幅)、これは min-width の最良の代替品と思われます。ハッキングなどは一切せず、準拠した CSS コードをそのまま実装するだけで、実装には 30 秒かかります。
グーグルで調べてみると、式が最も人気があるようです。とにかく、私の場合は、ブラウザ (IE と FF の両方) がランダムにロックされてしまいました。
わかりませんが、次のようなことで成功しました。
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
ダスティン・ディアスの最小高さの高速ハックと HTML または CSS で表のセルの絶対最小幅を指定するにはどうすればよいですか
CSS タグを _Width として実行します。500pxとかなんとか。
これはかなりうまく機能します...
div.container {
min-width: 760px;
width:expression(document.body.clientWidth < 760? "760px": "auto" );
}
最小高さの高速ハック 私にとってはうまくいきます(幅にもうまくいきます)
shim の例は、コンテナーが特定のサイズに達したときにブラウザーに水平スクロール バーを強制的に表示するのに適していますが、ウィンドウが小さくなってもコンテナー内のコンテンツのサイズが変更されることがわかります。IE 6 で最小幅を達成しようとする場合、これが全体的な目標ではないと思います。
不完全な最小幅テクニック http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg
さらに、式やその他のクレイジーな CSS ハックの使用は、良い習慣とは言えません。彼らは安全ではなく、不潔です。これ 記事 CSS ハックの注意点と、CSS ハックを完全に避けるべき理由について説明します。
私は個人的に、scarryjeff の投稿が IE6 で真の min-width を達成するための最良のアドバイスであると考えていますが、経験豊富な CSS レイアウト開発者として、この種の問題に同様に適用できるより良い解決策をまだ見つけていません。
これ 記事 Stu Nicholls による CSS Play では、IE、すべてのモード (Quirks など)、さらには IE/Mac で最小幅を達成するためのさまざまな方法が示されています。
同様の質問に対して、この手法を使用して最小幅を正しく達成する方法を詳しく説明した回答を提供しました。ここで閲覧できます:
この手法は、ほぼすべての状況で使用できるシンプルで有効な CSS です。上記の shim の例に適用すると、正しい min-width 機能と考えられる結果になります。
正しい最小幅テクニック http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg
単線ボタン
button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}
条件付きコメントを使用して MSIE 6 固有のスタイルシートを参照し、以下のように CSS を作成します。
準拠ブラウザは以下を使用します。
min-width: 660px;
その後、MSIE 6 は以下を使用します。
width: expression((document.body.clientWidth < 659)? "660px" : "auto");