各種ブラウザ対応min-height

1221 ワード

min-heightの実現について質問です.
 
ネット上では実現方法が示されています
{height:auto !important;min-height:20px;height:20px;}

见ると少し马鹿な感じで、IE 6はmin-height属性をサポートしていないので、height:autoがあります!important後、ie 6はmin-heightをどのように実現しますか?
しかし、事実は雄弁に勝って、divのcssに上の属性を書いて、各ブラウザはmin-heightを実現しました.そうだ!important文はie 6でテストされ、次のコードで使用されます.
/*html*/
<p class="timp">    </p>
/*css*/
p {color:blue !important}
p.timp {color:green} 

上記のコードはie 6の下で文字の色が青で、p.timpセレクタの優先度がpより高いため、説明します!importantは正常に動作します.
次に、次のコードをテストします.
/*html*/
<p>    </p>
/*css*/
p.timp {color:blue !important;color:green} 

結果pラベルの要素の色は緑です.
結論:ie 6で定義文を使用して併用!importantが同じ属性を定義する場合、!importantは正常に使用できます.同じ文で同じ属性を定義します.importantは機能せず、後定義の優先度です.
そこで{height:auto!important;min-height:20 px;height:20 px;}このコードでは、ie 6のheight属性値は20 pxです.
 
それなら直接コードを{height:20 px;min_height:20 px;その結果、標準ブラウザで文字オーバーフローが検出された場合、レイヤの高さは自動的に増加しないことが分かった.なぜなら、heightのプロパティ(heightのデフォルト値はautoであり、コンテナの高さはコンテンツの増加に伴って増加する)が定義されているためであり、ie 6にはheightの値が定義され、コンテナの高さはコンテンツによって支えられるというバグがある.
 
原理を知るとmin-heightを実現する有効なコードはseletor{min-height:20 px;_height:20 px;}と容易に得られる.