ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で IE6、IE7、FF と互換性のある min-height の最小高さを実装する

CSS で IE6、IE7、FF と互換性のある min-height の最小高さを実装する

黄舟オリジナル: 2017-07-21 09:32:011455ブラウズ

IE6、IE7、FF互換のmin-height最小高さをcssで実装

#mrjin {
    background:#ccc;    min-height:100px;    /*高度最小值设置为：100px*/
    height:auto !important; /*兼容FF,IE7也支持 !important标签*/
    height:100px; /*兼容ie6*/
    overflow:visible;
}

最大宽度...主流浏览器IE对max-width是不支持的，对这一属性的设置在IE中是无效的。同样的对min-width的设置也是无效的。

#commentlist img {
         width: expression(this.width > 500 ? 500: true); 
         max-width: 500px;
}   
#woaicss {
width:100%;  /*FF来说是有效的。而对于IE则没有作用/*
max-width:500px;
width:expression(document.body.clientWidth > 500? "500px": "auto" );
background:#c00;
margin:0 auto;
line-height:30px;
}

/*expression与Javas cript表达式关联起来，对浏览器要求较高1E5以上使用。不建议常用*/

clientHeight、offsetHeight、scrollHeightについて

window.screen.availWidth 現在の画面幅（空白）を返します
window.screen.availHeight現在の画面の高さ (空白部分)
window.screen.width使用する使用する使用する使用する使用する‐ ‐‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐
ここでは、4 つのブラウザによる document.body の clientHeight、offsetHeight、scrollHeight の解釈について説明します。

4つのブラウザとは、IE (Internet Explorer)、NS (Netscape)、Opera、FF (FireFox)です。
clientHeight
clientHeight について異論のある人はいません。誰もが、それがコンテンツの表示領域の高さ、つまりページブラウザーでコンテンツが表示される領域の高さであると考えています。、通常は最後のツールバーの下からステータスバーの上までです。この領域はページのコンテンツとは関係ありません。

offsetHeight
IE と Opera は、offsetHeight = clientHeight + スクロールバー + 境界線を考慮します。
NS と FF は、offsetHeight が Web ページコンテンツの実際の高さであると考えており、clientHeight よりも小さくなる可能性があります。

scrollHeight
IE と Opera は、scrollHeight を Web ページコンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。
NS と FF は、scrollHeight を Web ページのコンテンツの高さとみなしますが、最小値は clientHeight です。

簡単に言うと、
clientHeight はブラウザを通じてコンテンツが表示される領域の高さです。
NS と FF は、offsetHeight とscrollHeight が両方とも Web コンテンツの高さであると信じていますが、Web コンテンツの高さが clientHeight 以下の場合、scrollHeight の値は clientHeight であり、offsetHeight は clientHeight より小さくなる可能性があります。
IE と Opera は、offsetHeight が表示領域 clientHeight スクロールバーと境界線であると信じています。 scrollHeight は、Web ページコンテンツの実際の高さです。

同様に、clientWidth、offsetWidth、scrollWidth の説明も上記と同じで、高さを幅に置き換えるだけです。

=============================================== == =======================

clientHeight と offsetHeight の違い

clientHeight と offsetHeight の違い、つまり、 clientHeight の値にはスクロールバーは含まれません offsetHeight の高さにはスクロールバーの高さが含まれます。しかし、clientHeight と offsetHeight の値は正確には何で構成されているのでしょうか?これら 2 つの数値の値を計算するにはどうすればよいでしょうか?

1. clientHeight と offsetHeight の値は何によって決まりますか?

以下のDIVがある場合、表示される本文は「これがDIVの本体です」となります。

上の図に示すように、clientHeight の値は DIV コンテンツの実際の高さと CSS のパディング値によって決まりますが、offsetHeight の値は DIV コンテンツの実際の高さ、CSS のパディング値によって決まります。 CSS、スクロールバーの高さとDIVの境界値; CSSにおけるマージンの値については、clientHeightとoffsetHeightの値には影響しません。

2. CSS の高さの値は clientHeight と offsetHeight にどのような影響を与えますか?

まず、CSSのHeightで定義される高さを見てみましょう。例えば、この記事の最後にある「APPENDIX サンプルコード」（注：以下「サンプルコード」と呼びます）では、innerDIVClass の Height 値を 50px に設定しており、IE で計算した値は次のようになります。つまり、IE では、CSS の Height 値はパディングを含む DIV の高さ (つまり、offsetHeight の値) を定義します。Firefox では、CSS の Height 値は DIV の実際のコンテンツの高さのみを定義します。、パディングはこの値に含まれません (70 = 50 + 10 * 2)。

IE の場合:

innerDiv.clientHeight: 46 
innerDiv.offsetHeight: 50 
outerDiv.clientHeight: 0 
outerDiv.offsetHeight: 264

Firfox の場合:

innerDiv.clientHeight: 70 
innerDiv.offsetHeight: 74 
outerDiv.clientHeight: 348 
outerDiv.offsetHeight: 362

上記の例で、なぜ IE で externalDiv.clientHeight の値が 0 になるのか不思議に思われるかもしれません。サンプルコードでは、outerDIVClassのHeightの値が定義されていないため、この時点でIEではclientHeightの値を計算することができません。同様に、コード例では、innerDIVClass の Height 値が last に変更された場合、innerDIV.clientHeight の値も 0 になります。 (注: これは Firefox には存在しません)。

CSS の高さの値が DIV に表示されるコンテンツの高さより小さい場合はどうなりますか (CSS でオーバーフロー動作が定義されていない場合)。 IE では、clientHeight (または offsetHeight) 値全体は効果がなく、DIV は自動的に展開されますが、Firefox では DIV は展開されません。たとえば、サンプルコードでは innerDivClass の Height 値を 0 に設定し、計算結果は次のようになります。 IE の DIV は引き伸ばされ、その clientHeight 値はコンテンツとパディングの高さの合計*2 に等しくなります。Firefox では、テキストは DIV の境界からはみ出し、その clientHeight 値はパディング値のちょうど 2 倍になります。。

IEの場合：

innerDiv.clientHeight: 38 
innerDiv.offsetHeight: 42 
outerDiv.clientHeight: 0 
outerDiv.offsetHeight: 256

Firefoxの場合：

innerDiv.clientHeight: 20 
innerDiv.offsetHeight: 24 
outerDiv.clientHeight: 298 
outerDiv.offsetHeight: 312

APPENDIX サンプルコード

<html> 
<head> 
<style type="text/css">...... 
.innerDivClass 
{...}{...}{...}{ 
       color: red; 
       margin: 37px; 
       padding: 10px; 
       border: 2px solid #000000; 
       height: 50px; 


} 
.outerDivClass 
{...}{...}{...}{ 
       padding: 100px; 
       margin: 200px; 
       border: 7px solid #000000; 
} 
</style> 

<script>...... 
function checkClientHeight() 
......{ 
      var innerDiv = document.getElementById("innerDiv"); 
      var outerDiv = document.getElementById("outerDiv"); 

       result.innerHTML = "innerDiv.clientHeight: " + innerDiv.clientHeight + "<br />"; 
       result.innerHTML += "innerDiv.offsetHeight: " + innerDiv.offsetHeight + "<br />"; 
       result.innerHTML += "outerDiv.clientHeight: " + outerDiv.clientHeight + "<br />"; 
       result.innerHTML += "outerDiv.offsetHeight: " + outerDiv.offsetHeight + "<br />"; 
} 
</script> 
</head> 
<body> 
<div id="outerDiv" class="outerDivClass"> 
<div class="innerDivClass" id="innerDiv"> 
Hello world.         
</div> 
</div> 
<p></p> 
<div id="result"> 
</div> 
<input type="button" onclick="checkClientHeight()" text="Click Me" Value="Click Me" /> 
</body> 
</html>

以上がCSS で IE6、IE7、FF と互換性のある min-height の最小高さを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS スタイルを Web に導入する方法のまとめ次の記事：CSS スタイルを Web に導入する方法のまとめ

続きを見る