Implémenter min-height hauteur minimale compatible avec IE6, IE7 et FF en CSS

Implémentez la hauteur minimale min-height compatible avec IE6, IE7 et FF en 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以上使用。不建议常用*/

À propos de clientHeight, offsetHeight, scrollHeight

window.screen.availWidth Renvoie la largeur actuelle de l'écran (Espace vide)
window.screen.availHeight Renvoie la hauteur actuelle de l'écran (espace vide)
window.screen.width Renvoie la largeur actuelle de l'écran (valeur de résolution)
window.screen.height Renvoie l'écran actuel height (resolution Value)
window.document.body.offsetHeight; Renvoie la hauteur de la page Web actuelle
window.document.body.offsetWidth; Renvoie la largeur de la page Web actuelle
Ici, nous parlons de le clientHeight et clientHeight de document.body dans quatre navigateurs Explication de offsetHeight et scrollHeight.

Les quatre navigateurs sont IE (Internet Explorer), NS (Netscape), Opera et FF (FireFox).
clientHeight
Personne n'a d'objection à clientHeight. Ils pensent tous que c'est la hauteur de la zone visible du contenu, c'est-à-dire la hauteur de la zone où le contenu peut être vu. dans le navigateur de pages, généralement de la dernière barre d'outils à Cette zone au-dessus de la barre d'état n'a rien à voir avec le contenu de la page.

offsetHeight
IE et Opera considèrent offsetHeight = clientHeight + barre de défilement + bordure.
NS et FF considèrent offsetHeight comme la hauteur réelle du contenu de la page Web, qui peut être inférieure à clientHeight.

scrollHeight
IE et Opera considèrent scrollHeight comme la hauteur réelle du contenu de la page Web, qui peut être inférieure à clientHeight.
NS et FF considèrent scrollHeight comme la hauteur du contenu de la page Web, mais la valeur minimale est clientHeight.

En termes simples,
clientHeight est la hauteur de la zone où le contenu est visualisé via le navigateur.
NS et FF pensent que offsetHeight et scrollHeight sont tous deux des hauteurs de contenu de page Web, mais lorsque la hauteur du contenu de page Web est inférieure ou égale à clientHeight, la valeur de scrollHeight est clientHeight et offsetHeight peut être inférieure à clientHeight.
IE et Opera pensent que offsetHeight est la barre de défilement clientHeight de la zone visible plus la bordure. scrollHeight est la hauteur réelle du contenu de la page Web.

De même
Les explications de clientWidth, offsetWidth et scrollWidth sont les mêmes que ci-dessus, remplacez simplement la hauteur par la largeur.

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

La différence entre clientHeight et offsetHeight

De nombreux articles ont introduit clientHeight La différence avec offsetHeight est que la valeur de clientHeight n'inclut pas la hauteur de la barre de défilement, tandis que la valeur de offsetHeight inclut la hauteur de la barre de défilement. Cependant, en quoi consistent exactement les valeurs de clientHeight et offsetHeight ? Comment calculer la valeur de ces deux nombres ?

1. Qu'est-ce qui détermine les valeurs de clientHeight et offsetHeight ?

Si nous avons le DIV suivant, le texte principal affiché est "Ceci est le corps principal du DIV".

Comme le montre la figure ci-dessus, la valeur de clientHeight est déterminée par la hauteur réelle du contenu DIV et la valeur de remplissage en CSS, tandis que la valeur de offsetHeight est déterminée par la hauteur réelle du contenu DIV, la valeur de remplissage en CSS, la hauteur de la barre de défilement et le DIV Déterminé par la valeur de bordure ; quant à la valeur de marge en CSS, elle n'affectera pas les valeurs de clientHeight et offsetHeight.

2. Quel impact la valeur Height en CSS a-t-elle sur clientHeight et offsetHeight ?

Tout d’abord, examinons quelle hauteur est définie par Height en CSS. Par exemple, dans « l'exemple de code ANNEXE » à la fin de cet article (remarque : ci-après dénommé « exemple de code »), la valeur de hauteur de innerDIVClass est définie sur 50 px et la valeur calculée sous IE est la suivante. C'est-à-dire que dans IE, la valeur Height en CSS définit la hauteur du DIV, y compris le remplissage (c'est-à-dire la valeur de offsetHeight) ; dans Firefox, la valeur Height en CSS définit uniquement la hauteur du contenu réel du DIV ; , et le remplissage ne l'est pas. Inclus dans cette valeur (70 = 50 + 10 * 2).

dans IE :

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

dans Firfox :

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

Dans l'exemple ci-dessus, vous serez peut-être surpris. , pourquoi la valeur de externalDiv.clientHeight est 0 dans IE. En effet, dans l'exemple de code, la valeur Height de externalDIVClass n'est pas définie. À l'heure actuelle, dans IE, la valeur de clientHeight ne peut pas être calculée. De même, dans l’exemple de code, si la valeur Height dans innerDIVClass est remplacée par last, la valeur de innerDIV.clientHeight est également 0. (Remarque : cela n'existe pas sous Firefox).

Que se passe-t-il si la valeur Height en CSS est inférieure à la hauteur du contenu DIV à afficher (lorsque le comportement de débordement n'est pas défini en CSS) ? Dans IE, la valeur entière de clientHeight (ou offsetHeight) n'a aucun effet et le DIV sera automatiquement développé, tandis que dans Firefox, le DIV ne sera pas développé. Par exemple, dans l’exemple de code, la valeur Height de innerDivClass est définie sur 0 et le résultat du calcul est le suivant. Le DIV dans IE est étiré et sa valeur clientHeight est égale à la somme de la hauteur du contenu et du remplissage*2 ; dans Firefox, le texte dépassera la limite du DIV et sa valeur clientHeight est exactement le double de la valeur de remplissage. .

Dans IE :

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

Dans Firefox :

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

ANNEXE Exemple de code

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!