Web Front-endCSS TutorialHow to solve the problem that Firefox uses offsetHeight to get the height of a div, which is 0How to solve the problem that Firefox uses offsetHeight to get the height of a div, which is 0
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='javascript'>
window.attachEvent( "onload", function(){ _resizeScroll2();} );
window.onresize=function(){winresize();};
function _resizeScroll2(){
var html1 = '<p id="pcj" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<p style="float:left;width:50px;">测试</p>'
+ '<p style="float:left;width:320px;">danielinbiti</p>'
+ '</p>'
+ '<p id="pcj2" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<p style="width:320px;">danielinbiti</p>'
+ '</p>'
document.getElementById('outer').innerHTML=html1;
document.getElementById('pcj2').style.display='none';
alert(document.getElementById('pcj2').offsetHeight);
}
</script>
</head>
<body>
<p id='outer'></p>
</body>
</html>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!
Using GitHub Template Repos to Jump-Start Static Site ProjectsApr 16, 2025 am 11:14 AMIf you’re getting started with static site generators, did you know you can use GitHub template repositories to quickly start new projects and reduce your
Static First: Pre-Generated JAMstack Sites with Serverless Rendering as a FallbackApr 16, 2025 am 11:06 AMYou might be seeing the term JAMstack popping up more and more frequently. I’ve been a fan of it as an approach for some time.
CSS-Tricks Chronicle XXXVIApr 16, 2025 am 10:58 AMThis is one of these little roundups of things going on with myself, this site, and the other sites that are part of the CSS-Tricks family.
Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled ExchangesApr 16, 2025 am 10:46 AMIn this week's roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new
Meeting GraphQL at a Cocktail MixerApr 16, 2025 am 10:43 AMGraphQL and REST are two specifications used when building APIs for websites to use. REST defines a series of unique identifiers (URLs) that applications use
Introducing Sass ModulesApr 16, 2025 am 10:42 AMSass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used
How I Learned to Stop Worrying and Love Git HooksApr 16, 2025 am 10:41 AMThe merits of Git as a version control system are difficult to contest, but while Git will do a superb job in keeping track of the commits you and your
A Proof of Concept for Making Sass FasterApr 16, 2025 am 10:38 AMAt the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Dreamweaver CS6
Visual web development tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
