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
Implementation example of react project from new creation to deployment
Start a new project This article mainly records t...
About front-end JavaScript ES6 details
Table of contents 1. Introduction 1.1 Babel Trans...
VMware vSphere6.0 server virtualization deployment and installation diagram (detailed steps)
1. Key points for early planning of VMware vSpher...
How to quickly use mysqlreplicate to build MySQL master-slave
Introduction The mysql-utilities toolset is a col...
JavaScript implements the nine-grid mobile puzzle game
This article shares the specific code for JavaScr...
How to use cutecom for serial communication in Ubuntu virtual machine
Using cutecom for serial communication in Ubuntu ...
Complete steps to build NFS file sharing storage service in CentOS 7
Preface NFS (Network File System) means network f...
Mysql auto-increment primary key id is not processed in this way
Mysql auto-increment primary key id does not incr...
JS addEventListener() and attachEvent() methods implement registration events
In JavaScript's DOM event model, events are r...
JavaScript to implement search data display
This article shares the data display code for Jav...
Implementation code for adding slash to Vue element header
<template> <div class="app-containe...
How to create your own image using Dockerfile
1. Create an empty directory $ cd /home/xm6f/dev ...
Detailed explanation of how to use the Vue license plate search component
A simple license plate input component (vue) for ...
Detailed explanation of the order of JS object traversal
Some of you may have heard that the order of trav...
Recommend several MySQL related tools
Preface: With the continuous development of Inter...