Implementieren Sie die mit IE6, IE7 und FF kompatible Mindesthöhe in CSS

Implementieren Sie die mit IE6, IE7 und FF kompatible Mindesthöhe in 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以上使用。不建议常用*/

Über clientHeight, offsetHeight, scrollHeight

window.screen.availWidth Gibt die aktuelle Bildschirmbreite zurück (Leerzeichen)
window.screen.availHeight Gibt die aktuelle Bildschirmhöhe zurück (Leerzeichen)
window.screen.width Gibt die aktuelle Bildschirmbreite (Auflösungswert) zurück
window.screen.height Gibt den aktuellen Bildschirm zurück height (Auflösungswert)
window.document.body.offsetHeight; Gibt die Höhe der aktuellen Webseite zurück
window.document.body.offsetWidth; Gibt die Breite der aktuellen Webseite zurück
Hier sprechen wir die clientHeight und clientHeight von document.body in vier Browsern. Erklärung von offsetHeight und scrollHeight.

Die vier Browser sind IE (Internet Explorer), NS (Netscape), Opera und FF (FireFox).
clientHeight
Niemand hat Einwände gegen clientHeight. Sie alle denken, dass es sich um die Höhe des sichtbaren Bereichs des Inhalts handelt im Seitenbrowser, normalerweise von der letzten Symbolleiste bis Dieser Bereich über der Statusleiste hat nichts mit dem Seiteninhalt zu tun.

offsetHeight
IE und Opera berücksichtigen offsetHeight = clientHeight + Bildlaufleiste + Rahmen.
NS und FF betrachten offsetHeight als die tatsächliche Höhe des Webseiteninhalts, die kleiner als clientHeight sein kann.

scrollHeight
IE und Opera betrachten scrollHeight als die tatsächliche Höhe des Webseiteninhalts, die kleiner als clientHeight sein kann.
NS und FF betrachten scrollHeight als die Höhe des Webseiteninhalts, der Mindestwert ist jedoch clientHeight.

Einfach ausgedrückt
clientHeight ist die Höhe des Bereichs, in dem der Inhalt über den Browser angezeigt wird.
NS und FF glauben, dass offsetHeight und scrollHeight beide Höhen des Webseiteninhalts sind. Wenn die Höhe des Webseiteninhalts jedoch kleiner oder gleich clientHeight ist, ist der Wert von scrollHeight clientHeight und offsetHeight kann kleiner als clientHeight sein.
IE und Opera gehen davon aus, dass offsetHeight der sichtbare Bereich der clientHeight-Bildlaufleiste plus Rahmen ist. scrollHeight ist die tatsächliche Höhe des Webseiteninhalts.

Ähnlich
Die Erklärungen zu clientWidth, offsetWidth und scrollWidth sind die gleichen wie oben, ersetzen Sie einfach die Höhe durch die Breite.

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

Der Unterschied zwischen clientHeight und offsetHeight

Viele Artikel haben eingeführt clientHeight Der Unterschied zu offsetHeight besteht darin, dass der Wert von clientHeight nicht die Höhe der Bildlaufleiste enthält, während der Wert von offsetHeight die Höhe der Bildlaufleiste enthält. Doch woraus genau bestehen die Werte von clientHeight und offsetHeight? Wie berechnet man den Wert dieser beiden Zahlen?

1. Was bestimmt die Werte von clientHeight und offsetHeight?

Wenn wir das folgende DIV haben, lautet der angezeigte Haupttext „Dies ist der Hauptteil von DIV“.

Wie in der Abbildung oben gezeigt, wird der Wert von clientHeight durch die tatsächliche Höhe des DIV-Inhalts und den Füllwert in CSS bestimmt, während der Wert von offsetHeight durch die tatsächliche Höhe des DIV-Inhalts bestimmt wird. Der Auffüllwert in CSS, die Höhe der Bildlaufleiste und der DIV werden wie beim Randwert in CSS bestimmt und haben keinen Einfluss auf die Werte von clientHeight und offsetHeight.

2. Welchen Einfluss hat der Height-Wert in CSS auf clientHeight und offsetHeight?

Schauen wir uns zunächst an, welche Höhe in CSS durch „Height“ definiert wird. Beispielsweise ist im „ANHANG-Beispielcode“ am Ende dieses Artikels (Hinweis: im Folgenden als „Beispielcode“ bezeichnet) der Höhenwert von innerDIVClass auf 50 Pixel festgelegt, und der unter IE berechnete Wert lautet wie folgt. Das heißt, im IE definiert der Height-Wert in CSS die Höhe des DIV einschließlich der Auffüllung (d. h. der Wert von offsetHeight); in Firefox definiert der Height-Wert in CSS nur die Höhe des tatsächlichen Inhalts des DIV und Polsterung nicht in diesem Wert enthalten (70 = 50 + 10 * 2).

in IE:

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

in Firfox:

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

Im obigen Beispiel werden Sie vielleicht überrascht sein. , warum der Wert von OuterDiv.clientHeight im IE 0 ist. Das liegt daran, dass im Beispielcode der Wert von „outerDIVClass“ nicht definiert ist. Derzeit kann der Wert von „clientHeight“ im IE nicht berechnet werden. Wenn im Beispielcode der Height-Wert in innerDIVClass auf den vorherigen Wert geändert wird, ist der Wert von innerDIV.clientHeight ebenfalls 0. (Hinweis: Dies gibt es unter Firefox nicht).

Was passiert, wenn der Höhenwert in CSS kleiner ist als die Höhe des im DIV anzuzeigenden Inhalts (wenn das Überlaufverhalten nicht in CSS definiert ist)? Im IE hat der gesamte clientHeight-Wert (oder offsetHeight-Wert) keine Auswirkung und der DIV wird automatisch erweitert, während der DIV in Firefox nicht erweitert wird. Im Beispielcode ist beispielsweise der Höhenwert von innerDivClass auf 0 gesetzt und das Berechnungsergebnis lautet wie folgt. Das DIV im IE ist gestreckt und sein clientHeight-Wert entspricht der Summe aus der Höhe des Inhalts und der Auffüllung*2. In Firefox läuft der Text über die Grenze des DIV hinaus und sein clientHeight-Wert ist genau das Doppelte des Auffüllungswerts .

In IE:

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

In Firefox:

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

ANHANG Beispielcode

<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>

Das obige ist der detaillierte Inhalt vonImplementieren Sie die mit IE6, IE7 und FF kompatible Mindesthöhe in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!