The most basic CSS compatibility skills of FF and IE

1. The DIV of float must be closed. Example: (floata and floatb attributes have been set to float: Left ;)

   <Wrapper> <Div id = "floata"> </div> <Div id = "floatb"> </div> <Div id = "notfloatc"> </div> </wrapper>

   The notfloatc here does not want to continue translation, but wants to move down. This sectionCodeThere is no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed. Add <Div class = "clear"> </div> aw between <Div id = "floatb"> </div> <Div id = "notfloatc"> </div> reminder: 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, to enable automatic height adaptation, overflow: hidden should be added to the wrapper; when the box containing float is included, the automatic height adaptation is invalid in IE, at this time, the private attribute of IE layout should be triggered (Internet Explorer !) Zoom: 1; can be used to achieve compatibility. For example, a certain wrapper of mine is defined as follows:

   . Colwrapper {overflow: hidden; ZOOM: 1; margin: 5px auto ;}

   Onhavinglayout-Do not miss it. Everyone who makes CSS and uses scripts to operate the Dom must not miss it!

3. Margin doubles. 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, the corresponding CSS of <Div id = "iamfloat"> </div> is

   # Iamfloat {float: Left; margin: 5px;/* ie: 10px */display: inline;/* ie: 5px */}

5. There are many container inclusion relationships, especially when there is a parallel layout in the container, 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.
7. It is best not to define the height if the content is dynamically added. 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)
9. The most cruel means-! Important;If there is no way to solve some detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore it.

   . Tabd1 {Background: URL (/tab1.gif) No-repeat 0px 0px! Important;/* for FF */Background: URL (/tab1.gif) No-repeat 1px 0px;/* for IE */}

   It is worth noting that XXXX must be added! The important sentence is placed on another sentence. The specific reason is very simple, so I won't talk about it :)

Supplement: This article was published at the time.ArticleAnd I didn't think much about JavaScript at that time. Updated this time.

1. Border of IE6. It will automatically add margin. When the margin between the first box and the second box is a, if both boxes do not have border, then IE6, IE7, and FF are all correct. When there is a border, FF and IE7 border will not take up the "space" between them, and IE6, the old guy who likes "self-made smart", will open margin. I have not debugged whether padding can have this side effect. I personally suspect that it also exists. However, since I have analyzed the problem, I will not go into details. The solution is to determine whether it is IE6 and then dynamically fix margin. In the meantime, technologies such as JS getting browser versions and style values are involved.

2. For block elements, it is best to set the width under IE6 to float, especially the label.

3. In IE, if list-style-position: Inside is used, the Li element may be forcibly indented forward.