Comment résoudre le problème que Firefox utilise offsetHeight pour obtenir la hauteur d'un div, qui est 0-tutoriel CSS-php.cn

Comment résoudre le problème que Firefox utilise offsetHeight pour obtenir la hauteur d'un div, qui est 0

不言

Libérer： 2018-06-21 16:33:50

original

2261 Les gens l'ont consulté

Lorsque Firefox a besoin d'obtenir la hauteur de p, il doit souvent utiliser offsetHeight. Parfois, il rencontre le phénomène selon lequel offsetHeight est 0. Voici une solution plus pratique pour tout le monde. Les amis intéressés peuvent s'y référer

Lorsque Firefox a besoin d'obtenir la hauteur de p, il doit souvent utiliser offsetHeight. Parfois, offsetHeight est obtenu à 0.

Lors de l'utilisation d'IE ou de Firefox, en particulier dans le p+css actuel. la hauteur de p n'est souvent pas définie. En effet, après avoir ajouté le contenu de p, lorsque vous devez obtenir la hauteur de p, vous devez souvent utiliser offsetHeight.

En cours d'utilisation, vous pouvez parfois rencontrer le phénomène selon lequel offsetHeight est obtenu à 0, mais si vous utilisez divers outils de débogage JS pour déboguer, vous pouvez voir la valeur dans l'objet (cela ne sert à rien si vous le pointez directement à offsetHeight , mais si la vue de l'objet a une valeur, l'objet a été actualisé en appuyant sur Entrée dans le débogueur, il a donc une valeur)

Par exemple, l'extrait suivant

Le code est la suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script language=&#39;javascript&#39;> 
window.attachEvent( "onload", function(){ _resizeScroll2();} ); 
window.onresize=function(){winresize();}; 
function _resizeScroll2(){ 
var html1 = &#39;<p id="pcj" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="float:left;width:50px;">测试</p>&#39; 
+ &#39;<p style="float:left;width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
+ &#39;<p id="pcj2" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
document.getElementById(&#39;outer&#39;).innerHTML=html1; 
document.getElementById(&#39;pcj2&#39;).style.display=&#39;none&#39;; 
alert(document.getElementById(&#39;pcj2&#39;).offsetHeight); 
} 
</script> 
</head> 
<body> 
<p id=&#39;outer&#39;></p> 
</body> 
</html>

Copier après la connexion

Si vous obtenez la hauteur de pcj, vous obtenez 0 en onload. Parce qu'il existe une disposition flottante sous pcj.

Si p est simple à ce stade, vous pouvez utiliser le calque caché, comme pcj2 ici. Après avoir retiré le flotteur, la hauteur obtenue est aussi élevée que pcj.

Un point clé ici est que la disposition float convient dans IE, mais pour Firefox, elle est 0

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde Aide à l'apprentissage, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Partage de solutions pour améliorer la compatibilité des navigateurs des balises vidéo en HTML5

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!