(Experience) Div + CSS solves IE6, IE7, IE8, and FF compatibility problems

(Experience) Div + CSS solves IE6, IE7, IE8, and FF compatibility problems
Let me talk about it. After nearly a year of Div + CSS, we have accumulated many methods to solve compatibility problems. Here I only talk about the mainstream ones (IE6, IE7, IE8, ff) others have not been studied.
1. For compatibility issues in IE8, it is best to solve this problem by converting it to IE7 compatibility.Add the following section to the header:CodeThen, as long as it is compatible with IE7, IE8 will be compatible.
<Meta http-equiv = "X-UA-compatible" content = "Ie = 7"/>

2. The floating flaot causes the double margin problem under IE6., This is the most common and best to handle ,! Important solution, such
Margin-left: 10px! Important;/* IE7, IE8, FF is 10px */;
Margin-left: 5px;/* in IE6, the attribute is 5px, but 10px is displayed.

3. Clear the display blockThis can solve the block caused by floating. When the DIV background is filled or the image is filled, the background is broken or the difference is small. This kind of compatibility does not appear much. I have met it only twice now, by writing a display: block or other attribute in the CSS OF THE compatible Div, I don't know what it means. I have poor English but can achieve the desired effect. 6 E "Z + E % | 8g # |
4. When Div + CSS is used by many friends, it will appear in several browsers of IE, but there is a problem with ff. Use it! Important will make IE7 incompatible again, which is a headache. I wonder if there is any way to operate only on ff. I have used this method and I feel like I have never tried it, it is to add symbols such as *, &, ￥, #, @,-, and + before the attribute. Only the IE browser recognizes the attributes that have been added with symbols, but FF does not recognize the attributes, the method is as follows (pay attention to the signed attributes and the order of unsigned attributes)
Height: 100px;/* FF shows the height of 100 */
+ Height: 120px;/* display the height of 120 in ie678 */

5. sometimes, during layout, it is found that there is a div floating, and the next div is to be displayed below, and the result is run above, this usually occurs under ff. The solution is to clear the floating, add a div under the DIV with the floating value set, and write a clear: both on the CSS plane; <Div style = "float: Left; Height: 100px; width: 500px;">
<Div style = "clear: Both;">
<Div style = "height: 100px; width = 300px">

6. ThenCenter problemThere are many new users with this problem. The main reason is that they do not fully understand the box model and are not familiar with the box model. If you find that there is no problem on your page, I now know that, there are several reasons: 1. one is the one with no box, that is, the one with a big Div behind the body that installs all the Divs. You didn't write it. 2. You wrote it, but the width does not use absolute width: instead, it uses a relative width. In other words, the absolute width must be used. -

7. extension: If I want to implement three different effects under IE6, IE7, and FF during design, for example, IE6 has a red background and IE7 has a blue FF green background. Here, I tried it myself. Yes,Use compatible methods (pay attention to the sequence). 7 L & T-O7 K-A1 I
Background: red;/* red in FF */
+ Background: Blue! Important;/* blue under IE7 */
+ Background: green;/* green under IE6 */

Here, I would like to say that although compatibility brings you a lot of depressing and disturbing feelings, at the same time, after you do more, you will find that, compatibility sometimes meets many of your unsatisfactory results, just like the last one. If you want to achieve that effect without using compatible methods, go to Js, JS has to think about the difference between FF and IE. Of course, I don't know about JS compatibility. I haven't studied it. In the future, we will learn CSS + Div first.

if you do more, practice, and keep the box model in your mind, you will be proficient and be able to use it freely. When you do this, you will naturally know where there will be compatibility problems, solve the most common compatibility issues directly before testing.