Div + CSS layout browser compatibility

A project system uses Div + CSS to control the front-end display interface. It is found that the display effect varies greatly in different browsers, now I am looking for some information about Div + CSS about the browser to make a summary, which is also a learning of Div + CSS knowledge.
What is the most common difference between Firefox and IE? ! Important Methods. For compatibility issues with different versions of different browsers and browsers, see the following methods: : @ Import , Note , Attribute Selector , Sub-object Selector And Voice-family And other methods. CSS website layout recording .
The following are the CSS compatibility issues between IE and Firefox:
1. doctype affects CSS Processing
2. FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE does not work.
3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.
4. FF: 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. FF: supported! Important, ie is ignored, available! Important sets a special style for ff. 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 IE ff at the same time. Hand can only be IE
8. FF: 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 Mozilla Firefox 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: 0 10px 0 10px;} 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: 0 10px 0 10px}

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, while in IE, only margin has a value. Therefore, UL {margin: 0; padding: 0;} is defined first ;}
Most problems can be solved.
　　
Note:
1. The DIV of float must be closed.
For example: (floata and floatb attributes have been set to float: Left;) <# Div id = \ "floata \">
<# Div id = \ "floatb \">
<# Div id = \ "notfloatc \">
The notfloatc here does not want to continue translation, but wants to move down.
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.
In the <# Div class = \ "floatb \">
<# Div class = \ "notfloatc \">
<# Div class = \ "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: 5px auto ;}
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:
<# Div id = \ "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 detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore. tabd1 {
Background: URL (/RES/images/up/tab1.gif) No-repeat 0px 0px! Important;/* style for FF */
Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px;/* style for IE */}
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:
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.

CSS has a high value for the compatibility of browsers. In general, there is a great difference between IE and Firefox. Here we will introduce the compatibility points.

FAQs:

1. doctype affects CSS Processing

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

3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

4. FF: 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. FF: supported! Important, ie is ignored, available! Important sets a special style for FF

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 IE ff at the same time. Hand can only be IE

8. FF: 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 Mozilla Firefox 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.
Under ie5
Div {width: 300px; margin: 0 10px 0 10px ;}
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 make the following changes:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}
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, while in IE, only margin has a value, so we first define
Ul {margin: 0; padding: 0 ;}
Most problems can be solved.

Note:

1. The DIV of float must be closed.

Example: (floata and floatb attributes have been set to float: Left ;)
<# Div id = "floata"> </# div>
<# Div id = "floatb"> </# div>
<# Div id = "notfloatc"> </# div>
The notfloatc here does not want to continue translation, but wants to move down.
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.
In
<# Div class = "floatb"> </# div>
<# Div class = "notfloatc"> </# div>
Add
<# Div class = "clear"> </# div>
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: 5px auto ;}

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:
<# Div id = "imfloat"> </# div>

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 detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore it.
. Tabd1 {
Background: URL (/RES/images/up/tab1.gif) No-repeat 0px 0px! Important;/* style for FF */
Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px;/* style for IE */}

It is worth noting that XXXX must be added! Important is placed on the other sentence, which has been mentioned above
Else ---------------------------------------------------------------------------------------------------------------------------------
First, let's take a look at the cracking of IE's box-model.
The notorious bug of IE box-model exists in every previous version of IE6/win. This bug was not released until tantak released the most widely spread hack.

Http://www.tantek.com/CSS/Examples/boxmodelhack.html

Ie5.x/win parses box-model in the same way. They think width includes border and padding. Fortunately, this has improved in IE6.
However, IE6 is backward compatible with previous errors. In fact, IE6 has two cores, and he still shows tolerance for errors before the old pages, IE6 can accept the correct box-model only when the doctype statement is strictly added to the document.
Therefore, the hack of tantak must be included in the document with the correct doctype to work properly.
Quote
Div. Content {
Width: 400px; // This is the incorrect width, which is read by all browsers.
Voice-family: "\"} \ "; // ie5.x/win ignores the content after "\ "} \"
Voice-family: Inherit;
Width: 300px; // Some browsers including IE6/win read this sentence. The new value (300px) overwrites the old one.
}
HTML> body. Content {// html> body is written in css2.
Width: 300px; // the browser that supports css2 is lucky enough to read this sentence.
}
Now back to the topic, we often see it! Important and (Space)/**/: used together. What are the mysteries of this writing?

Let's look at the writing method. Here I can provide another writing method to achieve this effect.
Quote
Div. Content {
Width: 300px! Important; // This is the correct width, most of which are supported! The browser marked with important uses the value here
Width (Space)/**/: 400px; // IE6/win does not parse this sentence, so IE6/win still thinks that the width value is 300px; when ie5.x/win reads this sentence, the new value (400px) overwrites the old one because! Important flag does not work for them
}
HTML> body. Content {// html> body is written in css2.
Width: 300px; // the browser that supports css2 is lucky enough to read this sentence.
}
Similarly, this method can work normally only after the correct document type declaration, as mentioned earlier.

The document type declaration is like a switch that enables the future of backward compatibility. If it is used incorrectly, It is a Pandora Box
Bytes ---------------------------------------------------------------------------------------------------------------
Whether or not ie7.0 is better than ie6.0, IE7 and IE6 are incompatible. There is no doubt that new pain points are introduced, at least in the debugging process, there is another program and a large number of incompatibility problems.

At present, there are still a few users using ie7.0, and ie6.0 still accounts for a large proportion of users. However, a large number of web pages tested by IE6 are not displayed properly in ie7.0.

According to ie7.0 official comments:

Ie7.0 introduced the strict mode based on IE6, including many improvements on the parsing and presentation of stacked Style Sheets (CSS. These improvements are intended to improve the consistency of the layered style sheet interpreted by Internet Explorer to meet W3C recommendation standards and provide developers with a set of functionality that can be relied on.

No matter how beautiful the official language is, or whether ie7.0 is really W3C, there are too many personalized things and too many differences between browsers, which makes us helpless. The web page displayed under IE6 is almost unsightly under ie7.0. So when we design the web page, while solving the compatibility problem between ie6.0 and Firefox, are we more obedient to ie7.0 that comply with W3C or compromise with ie6.0 of 96%? This problem is actually a bit redundant. What we can do is perhaps the moderate choice. We only need to try to debug it to all browsers.

Ie7.0 is not compatible with ie6.0. Currently, I know the following aspects. If there are any omissions or errors, please add or correct them later.

　　1. IE7, IE6 Div + CSS show different width Definitions
In terms of width definition, the width of IE7 is wider than that of IE6. This is the reason why the webpage may have overflow problems, fortunately, you can change the value or change the percentage.

　　2. ie7.0 is fixed! Important bug. 
Previously due to ie6.0 pair! Important identifies bugs. The box model interpretation in Firefox and IE is inconsistent, resulting in a 2px difference. Most Web Standard designers use this bug to be compatible with ie6.0 and Firefox, that is, using: div {margin: 30px! Important; margin: 28px ;}. However, ie7.0 fixed this bug, so the problem emerged again. How can I be compatible with ie.7.0 and ie6.0 and Firefox?

　　3. Change of Box Model
In IE7, overflow behavior is modified to adapt to the css2.1 box model.

　　4. Some CSS filters in ie7.0 will no longer be available
Many potential resolution errors have been modified in IE7, which may prevent filters from working properly in earlier ie versions. For example, * HTML filter, underline filter, And/*/comment filter.

　　5. ie7.0 does not support many nonstandard CSS statements and has stricter requirements on JS syntax..
Many JS pages normally displayed in IE6 cannot be displayed normally in IE7, and no error is prompted. Ie7.0 has stricter requirements on JS syntax, but this specification does not seem to be explained, and it does not clearly tell you how they are "standardized" and "Fan.