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
Recommend
Detailed explanation of script debugging mechanism in bash
Run the script in debug mode You can run the enti...
Detailed explanation of HTML basics (Part 2)
1. List The list ul container is loaded with a fo...
Example method to find keywords and their preceding and following information in Linux logs
In daily work, we often need to view logs. For ex...
MYSQL slow query and log example explanation
1. Introduction By enabling the slow query log, M...
js implements single click to modify the table
Pure js implements a single-click editable table ...
Introduction to the use of the indeterminate property of the checkbox
When we use the folder properties dialog box in Wi...
Analysis of Hyper-V installation CentOS 8 problem
CentOS 8 has been released for a long time. As so...
HTML Learning Notes--Detailed Explanation of HTML Syntax (Must Read)
1. What is HTML markup language? HTML is a markup...
Install Linux using VMware virtual machine (CentOS7 image)
1. VMware download and install Link: https://www....
The difference between clientWidth, offsetWidth, scrollWidth in JavaScript
1. Concept They are all attributes of Element, in...
Steps for packaging and configuring SVG components in Vue projects
I just joined a new company recently. After getti...
Analysis of MySQL's planned tasks and event scheduling examples
This article uses examples to describe MySQL'...
Question about custom attributes of html tags
In previous development, we used the default attr...
Introduction to the use of MySQL official performance testing tool mysqlslap
Table of contents Introduction Instructions Actua...
CentOS7 upgrade kernel kernel5.0 version
Upgrade process: Original system: CentOS7.3 [root...