Div + CSS compatible with IE6, IE7, and Firefox

The most common difference between Firefox and IE is that! The important method provides the following methods for compatibility of different versions of other browsers and browsers, such as @ import, annotation, and attribute selector, sub-object selector, voice-family, and other methods are described in CSS website layout recording.

◆ The following are CSS compatibility issues between IE and Firefox:

1. doctype affects CSS Processing

2. Firefox: When Div sets margin-left and margin-Right to auto, it is already centered, and IE is not working.

3. When setting text-align for Firefox: body, you must set margin: auto (mainly margin-left and margin-Right) for the DIV to be centered.

4. Firefox: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

5. Firefox: supported! Important, ie is ignored, available! Important sets a special style for Firefox. It is worth noting that you must set XXXX! The important sentence is placed on the other sentence.

6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

7. cursor: pointer can display the cursor finger in iefirefox at the same time. Hand can only be IE

8. Firefox: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

9. The box model interpretation in mozillafirefox and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows: div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

10. The box interpretations of ie5 and IE6 are inconsistent.

Div {width: 300px; margin: 010px010px;} under ie5 ;}
The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can modify Div {width: 300px as follows! Important; width/**/: 340px; margin: 010px010px}
I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

11. UL labels have padding values by default in Mozilla, and only margin has a value in IE. Therefore, defining ul {margin: 0; padding: 0 ;} first can solve most of the problems.

◆ Note:

 

1. The DIV of float must be closed.

For example: (floata and floatb attributes have been set

  
  


   
   
Float: Left ;)<#Divid= \ "Floata \"> 

   
   
<#Divid= \ "Floatb \"> 

   
   
<#Divid= \ "Notfloatc \"> 

  
  
 

The notfloatc here does not want to continue translation, but wants to move down.
This sectionCodeThere is no problem in IE. The problem lies in Firefox. The reason is that notfloatc is not a float label and must be closed.
In

  
  


   
   
<#Divclass= \ "Floatb \"> 

   
   
<#Divclass= \ "Notfloatc \"> 

   
   
Add<#Divclass= \ "Clear \"> 

  
  
 

This Div must pay attention to the declaration position. It must be placed in the most appropriate place and must be at the same level as two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception may occur.
And define the clear style as follows:

 
  
  


   
   
:. Clear {

   
   
Clear: Both ;}

  
  
 

In addition, in order to automatically adapt to the height, overflow: hidden should be added to the wrapper;
When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.
For example, a wrapper is defined as follows:

 
  
  


   
   
:. Colwrapper {

   
   
Overflow: hidden;

   
   
Zoom: 1;

   
   
Margin: 5 pxauto ;}

  
  
 

2. The problem of doubling margin.

The DIV set to float doubles the margin set in IE. This is a bug in IE6.
The solution is to add the display: inline In the div;
For example:

  
  


   
   
<#Divid= \ "Imfloat \"> 

   
   
 

   
   
The corresponding CSS is

   
   
# Iamfloat {

   
   
Float: left;

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

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

   
   
 

  
  
 

3. Container inclusion relationships

In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems. In ie, the width of the outer layer is broken by the DIV with a wider inner layer. You must use Photoshop or firework to obtain pixel-level precision.

4. Questions about height

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

5. the most cruel means -! Important;

If there is no way to solve some details, you can use this method. Firefox "! Important will automatically give priority to resolution, but IE will ignore it.

 
  
  


   
   
. Tabd1 {

   
   
Background: URL (/RES/images/up/tab1.gif) no-repeat0px0px! Important;/* styleforFirefox*/

   
   
Background: URL (/RES/images/up/tab1.gif) no-repeat1px0px;/* styleforie */}

  
  
 

It is worth noting that XXXX must be added! Important is placed on the other sentence, which has been mentioned above

When ie7.0 came out, there were new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted. To solve the problem of ie7.0 compatibility, I found the following article.Article:

I use most of them now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly explained, and the page will not be displayed as required! After searching, I found a good hack Method for IE7 and used "* + html". Now I can use IE7 to browse it. It should be okay.

You can write a CSS file as follows:

  
  


   
   
# Example {color: #333;}/* Moz */

   
   
* Html # example {color: #666;}/* IE6 */

   
   
* + Html # example {color: #999;}/* IE7 */

  
  
 

The font color in Firefox is #333, the font color in IE6 is #666, And the font color in IE7 is #999. I really want IE6 to retire soon.

◆ Div + CSS three-row and three-column layout (compatible with various browsers)

2. <! Doctypehtmlpublic "-// W3C // dtdhtml4.01 // en"
4.  
6. Http://www.w3.org/TR/html4/strict.dtd"> 
8. <Html> 
10. <Head> 
12. <Title>Div layout Test</Title> 
14. <StyletypeStyletype="Text/CSS"> 
16.  
18. Div
20. {
22. Height: 150px;
24. }
26. Div. Left
28. {
30. Width: 20%;
32. Float: left;
34. Clear: right;
36. Background-color: # eeeeee;
38. }
40.  
42. Div. Center
44. {
46. Width: 50%;
48. Float: left;
50. Clear: right;
52. Background-color: # cccccc;
54. }
56.  
58. Div. Right
60. {
62. Width: 30%;
64. Float: left;
66. Clear: right;
68. Background-color: #808080;
70. }
72. Div. Both
74. {
76. Width: 100%;
78. Clear: both;
80. Background-color: #696969;
82. }
84.  
86. </Style> 
88. </Head> 
90.  
92. <Body> 
94. <DivclassDivclass="Left">Left side</Div> 
96. <DivclassDivclass="Center">Middle Side</Div> 
98. <DivclassDivclass="Right">Right side</Div> 
100.  
102. <DivclassDivclass="Both">Full row</Div> 
104.  
106. <DivclassDivclass="Left">Left side</Div> 
108. <DivclassDivclass="Center">Middle Side</Div> 
110. <DivclassDivclass="Right">Right side</Div> 
112. </Body> 
114. </Html> 

From: http://developer.51cto.com/art/201008/220140.htm

Purpose: Collect Summary