IE6でmax-widthとmin-heightがサポートされていない問題の解決方法

今日は、max-widthとmin-heightがIE6でサポートされていないという問題の解決策を紹介します。

ページのコンテンツ全体が充実していない場合でも、美しい表示を実現するためにページの最小の高さを設定することがよくありますが、設定された幅を超えないように画像の最大幅を設定すると、min を使用して最小の高さを設定できます。 -height。max-width CSS 属性を使用して最大幅制限を設定します。しかし、問題は、IE7 以降のバージョンではサポートされていますが、IE6 だけが min-height、MAX-height、max-width、min-width をサポートしていないことです。どうすればよいでしょうか。

DIVCSS5 では、CSS ハックを使用した解決策が導入されています。一般的に、画像やコンテンツが設定された幅よりも大きい場合、IE6 は設定された幅と高さを壊します。これを使用して追加できます。問題を解決するには、IE6 独自の CSS 認識を使用して「_」と一致させます

たとえば、Web ページの見栄えを良くするには、最小の高さを 500 ピクセルに設定する必要がありますが、IE6 がそうでない場合はどうすればよいですかそれをサポートしますか？
たまたま、CSS プロパティを使用して左から右に読み取り、下と右の CSS プロパティ値を上から下に繰り返されるプロパティに置き換えます。

具体的な CSS コードは次のとおりです:

.div{min-height:500px;_height:500px;}

注: 前者は IE7 以降のすべての IE、Firefox、Google でサポートされていますが、後者は IE6 でのみサポートされています。 . この CSS HACK と CSS の読み取り順序を利用して、この問題を解決します。

もちろん、次のようなCSSコードもあります

.div{height: expression(this.height> 500 ? 500 : true);  max-height: 500px;}

しかし、このCSSコードだと読み込み後に画像が正常に表示されなくなる(画像がランダムに縮小されて正常に表示できなくなる)

のでオススメします。 min-height:500px;_height: 500px; を使用して、IE6 が max 属性と min 属性をサポートできない問題を解決します。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

キャメルケースの名前付けと JS に関する質問への回答

JS のブール値、関係演算子、論理演算子の詳細な説明と例

フロントエンド JS の概要フレームワークとその使用法の説明

以上がIE6でmax-widthとmin-heightがサポートされていない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。