Solutions to browser interpretation differences in size and width and height in CSS

Let’s look at an example first

Copy code

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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>Untitled Document</title>
<style>
#m{height:300px;width:300px;background:#ccc}
#a{float:left;height:100px;width:100px;background:#f00;}
#b{float:left;height:100px;*height:110px;_height:120px;width:100px;background:#0f0;}
#c{clear:both;height:100px;width:100px;*width:100px;_width:120px;background:#00f;}
</style>
</head>
<body>
<div id=”m”>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

Here, I define three heights respectively.
The first normal definition will take effect in all browsers;
The second definition adds an asterisk in front, which will be recognized as the height attribute in IE6 and IE7, but Firefox and IE8 will think it is a syntax error and ignore it. According to the order of execution, the height with an asterisk is executed in IE6 and IE7, and the first normal height is invalid (or overwritten);
The third height has an underscore in front. Only IE6 considers the underscore as a valid height attribute, while IE7, IE8 and Firefox regard the "_height" attribute as a non-existent attribute and therefore do not execute it, while IE6 executes it. In this way, the first two heights are covered by the underlined height in IE6.

Well, through this example, you should understand that if we want to set different heights of an element in different browsers, we can use the * and _ symbols to assist in the definition. At the same time, we also learned that Microsoft is a company with a high tolerance for mistakes! Haha.

However, if the first two lines of document type and namespace declarations in this example are removed, the underlined height will also be displayed normally.

The width settings are the same.

In our actual work, we will often encounter different browser interpretations of margin attributes, then asterisks and underscores can be of great help.

<<: A brief discussion on how Tomcat breaks the parent delegation mechanism

>>: Several ways to vertically and horizontally center in CSS3 with indefinite height and width

CSS to achieve pop-up window up and down center left and right and transparent background lock window effect

Solutions to browser interpretation differences in size and width and height in CSS

CSS to achieve pop-up window up and down center left and right and transparent background lock window effect

Website Standard Development Flowchart

Detailed steps for implementing timeout status monitoring in Apache FlinkCEP

Vue component encapsulates sample code for uploading pictures and videos

Detailed explanation of how to pass values between react hooks components (using ts)

Antdesign-vue combined with sortablejs to achieve the function of dragging and sorting two tables

About dynamically adding routes based on user permissions in Vue

Linux uses bond to implement dual network cards to bind a single IP sample code

Detailed tutorial on installing MySQL database on Alibaba Cloud Server

MySQL master-slave replication delay causes and solutions

Recommend

About the location of the H1 tag in XHTML

Introduction to the properties of B-Tree

CSS to achieve zoom in and out close button (example code)

Understanding JSON (JavaScript Object Notation) in one article

Detailed steps to install MySQL 5.7 via YUM on CentOS7

JavaScript to achieve full screen page scrolling effect

Steps to introduce PWA into Vue project

The complete process of iptables rules in Docker being lost after iptables restart

Implementation of draggable rows and columns and selection column components based on el-table encapsulation

10 HTML table-related tags

MySQL count detailed explanation and function example code

How to execute PHP scheduled tasks in CentOS7

Solution to the problem that the background image of a label does not display in IE8

Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study

5 Steps to Implement Responsive Web Design Method and Say Goodbye to Waterfall Model (Graphic Tutorial)