How to solve the problem that Firefox uses offsetHeight to get the height of a div, which is 0-CSS Tutorial-php.cn

How to solve the problem that Firefox uses offsetHeight to get the height of a div, which is 0

不言

Release： 2018-06-21 16:33:50

Original

2253 people have browsed it

When Firefox needs to obtain the height of p, it often needs to use offsetHeight. Sometimes the offsetHeight is obtained as 0. The following is a more practical solution for everyone. Interested friends can refer to it

When Firefox needs to obtain the height of p, it often needs to use offsetHeight. Sometimes the offsetHeight is obtained as 0.

When using IE or Firefox, especially in the current p css method, the height of p is often not defined. This is because after adding the content of p, when you need to obtain the height of p, you often need to use offsetHeight.

In use, sometimes you will encounter the phenomenon that offsetHeight is obtained as 0, but if you use various JS debugging tools to debug, you can see the value in the object (it is worthless if you point it directly to offsetHeight , but if it is an object view, it has a value. If you press Enter to view the object in the debugger, the object has been refreshed, so it has a value.)

For example, the following fragment

The code is as follows:

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

Copy after login

If you get the height of pcj, you get 0 in onload. Because there is a float layout under pcj.

If p is simple at this time, you can use the hidden layer, such as pcj2 here. After removing the float, the obtained height is as high as pcj.

A key point here is that the float layout is no problem in IE, but for Firefox it is 0

The above is the entire content of this article, I hope it will be helpful to everyone's learning Help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Sharing of solutions to enhance browser compatibility of video tags in HTML5

The above is the detailed content of How to solve the problem that Firefox uses offsetHeight to get the height of a div, which is 0. For more information, please follow other related articles on the PHP Chinese website!