Analysis of compatibility between IE6, 7, and Firefox on margin and padding in CSS

1. Identify CSS attribute difference labels between IE and Fire Fox! Important
# Page_body {
Width: 1000px! Important;
Height: 30px! Important;
Width: 980px;
Height: 36px;
}
Above Style
In IE6/7, run only width: 980px and height: 36px.
In FireFox, priority is given! The width: 1000px and height: 30px of the CSS line of the important label
Remember, the order of the above Code cannot be reversed.
2. div center difference
FF: margin: 0 auto 0 auto! Important;
IE: margin: 0 auto;
FF: When div sets margin-left and margin-right to auto, it is already centered.
3. Center text content
FF: margin: 0 auto 0 auto! Important; text-align: center
IE: text-align: center
FF: When you set text-align for the body, you must set margin: auto (mainly margin-left, margin-right) for the div to be centered.
4. Differences in width calculation between width, margin, and padding
Difference in Calculation of values of div, margin, and padding with a width of PX
Ie {width: 600px; margin: 10px; padding10px ;}
In Firefox, modify
FF {width: 560px; margin: 10px; padding10px ;}
That is to say, in FF, the left and right values of margin and padding must also be calculated in width, 600-10 × 2-10X2 = 560px.
In Div + Css refactoring, the most important part in the layout structure of IE and FF is the second and fourth points. If the above problems are not well handled, in this case, your website is so precise and well-formed in IE. once it reaches Fire Fox, it is a mess.
Finally, if you want to change your website to a Div + Css website with perfect compatibility, you will have a lot of CSS knowledge, so you may be an experienced expert, we also need to pay more time for websites that are compatible with bugs and use table layout.
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 this 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 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
<# Div class = "floatB">
<# Div class = "NOTfloatC">
Add
<# 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;
Display: inline ;}
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;
Background: url (/res/images/up/tab1.gif) no-repeat 1px 0px ;}