Research on Div + CSS browser compatibility 2

[Reprinted, archived, and available for future reference]

Due to compatibility issues between browsers, when creating web pages, in order to make the pages display relatively consistent in different browsers; so I summarized the hack between several browsers and some precautions on browser compatibility. Currently, browsers must be compatible with IE6, IE7, IE8, and ff.

Section 1 Overview of CSS hack Summary

Browser	Hack (not supported isRed)
IE6	"*" "_" "\ 9"! Important"
IE7	"*" "_" "\ 9"! Important"
IE8	"*" "_" "\ 9"! Important"
FF	"*" "_" "\ 9"! Important"

 

For example:

. Main { Background-color: # cc00ff;/* all browsers will be purple */--------- all Background-color: # ff0000 \ 9;/* IE6, IE7, and IE8 are displayed in red */---------- IE8 * Background-color: # 0066ff;/* IE6 and IE7 will change to blue */----------------- IE7 _ Background-color: #009933;/* IE6 will change to green */-------------------------- IE6 Background-color: #000000! Important;}/* FF turns black */----------------------------- FF

 

Section 2: compatibility problem sorting: 2.1 doctype affects CSS processing.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-Frameset.dtd">

TransitionalType: It refers to a transitional type. browsers of this type are relatively loose in XHTML parsing and allow the use of tags in html4.01, but must comply with the XHTML syntax. This is a common method, which is used by default when a webpage is created using Dreamweaver.

StrictType:Strict type. When used, the browser will be relatively strict, and no representations of identifiers and attributes are allowed, such as directly using bgcolor background color attributes in elements.

FramesetType:Framework page type. If the webpage uses the framework structure, it is necessary to use such a document declaration.

2.2 Due to code differences, IE6 cannot parse CSS files normally

The web page uses the UTF-8 encoding format, which is no problem, the problem is that the external CSS file defaults to ANSI encoding and is not saved as the UTF-8 format. You may find that this is not a problem in general. However, when a CSS file contains Chinese comments, it may be unsatisfactory! It is estimated that browsers earlier than IE6 cannot correctly parse the CSS file because of the encoding problem, so CSS does not work in IE6. There are still many people in IE6. Therefore, this problem must be solved:

Method 1: the CSS, JS and web files are stored in a unified UTF-8 format.

Method 2: Remove Chinese comments in CSS and JS, or change them to English.

The preceding section shows that the CSS file cannot be correctly parsed due to encoding issues in IE6.

2.3 form labels automatically add margin margins in IE

In IE, this label will automatically margin some margins, while in FF, margin is 0. Therefore, if you want to display consistency, it is best to specify margin and padding in CSS, for the above two problems, CSS generally uses the FORM {margin: 0; padding: 0 ;}

2.4 UL labels

UL labels have padding values by default in Mozilla, while only margin has values in IE;

So define ul {margin: 0; padding: 0;} first ;}

2.4 margin doubling Problem

The margin set for div with float is doubled in IE. This is a bug in IE6. The solution is to add display: inline In the div; for example:

<Div id = "imfloat"> </div> the corresponding CSS is

# Imfloat {

Float: left;

Margin: 5px;/* 10 Px in IE */

Display: inline;/* in IE, It is understood as 5px */}