[To] the IE and Firefox compatible CSS Daquan
CSS on the browser for compatibility with high value, under normal circumstances IE and Firefox there is a big difference between the analytical, here is what you do with points.
Common compatibility issues:
1.DOCTYPE affect handling CSS
2.FF: div set margin-left, margin-right when the auto center, not IE
3.FF: body set up text-align, the need for margin div: auto (mainly margin-left, margin-right) before the middle
4.FF: Setting padding, div increased height and width, but IE does not, it needs! More important for a height and width
5.FF: Support! Important, IE is ignored, can be! Important for the FF set up style
6.div vertical center: vertical-align: middle; spaced to be as high and the entire line-DIV height: 200px; Then insert the text on the vertical center. Shortcomings is to control the content will not change
7.cursor: pointer at the same time can be displayed in IE FF finger-shaped cursor, IE can only hand
8.FF: Links frame and background color, to set up display: block, set up at the same time float: left to ensure that did not change. Reference menubar, and menubar set up to a height to avoid shows that the bottom edge of dislocation If we do not set height, in the menubar can be inserted in a space.
9. Mozilla firefox and IE BOX model to explain the difference between the two led to inconsistencies px solution: div (margin: 30px! Important; margin: 28px;) attention to two margin in the order must not write against, according to Acha that! This important attribute IE can not be identified, but other browsers can be identified. Therefore, in fact, under IE interpret this: (div maring: 30px; margin: 28px) repeat it in accordance with the definition of the last to implement, not just write margin: XXpx! Important;
10.IE5 and IE6 BOX explain the inconsistencies IE5 under div (width: 300px; margin: 0 10px 0 10px;) div width will be interpreted as 300 px-10px (right-filled) -10 px (left filled) with a width of the final div 280px, and in other IE6 and width of the browser is 300 px +10 px (right-filled) +10 px (left packed) = 320 px calculated. Then we can do the following modifications div (width: 300px! Important; width /**/: 340px; margin: 0 10px 0 10px) on the / ** / What I do not quite understand, and I only know that IE5 support firefox But IE6 does not support, it was understandable if so, please tell me sound grateful! :)
11.ul labels in Mozilla is a default value of the padding and margin in IE only have value it first definition ul (margin: 0; padding: 0;) Most of the problems can be solved
Note:
1, the float must be closed div.
For example: (which floatA, floatB attribute has been set to float: left;) <# div id = "floatA"> </ div #>
<# Div id = "floatB"> </ div #>
<# Div id = "NOTfloatC"> </ div #> here NOTfloatC do not want to continue to shift, but hope that the row down.
This code in IE without any problem, the problem in FF. NOTfloatC reason is not float labels, tags must be closed float.
In "# div class =" floatB "></# div>
<# Div class = "NOTfloatC "></# div> add between <# div class =" clear "></# div> div must pay attention to this position statement, we need to be the most appropriate place, and must have two attributes of div float at the same level, nested relations between can not exist, or else they would have abnormal.
This style will be clear and defined as follows:. Clear (
Clear: both;) In addition, in order to allow a high degree can automatically adapt to the wrapper inside the overflow: hidden;
When the box containing the float time with a high degree of adaptation in IE automatically be ineffective, it should be triggered when IE layout of the private properties (IE heinous ah!) With zoom: 1; can be done, and this reached compatible.
Eg, a wrapper defined as follows:. Colwrapper (
Overflow: hidden;
Zoom: 1;
Margin: 5px auto;)
2, doubling the margin issue.
Set to float in the div ie the margin will be set up under the double. This is a ie6 have the bug.
In this solution is inside the div display: inline;
For example:
<# Div id = "imfloat "></# div>
For the corresponding css
(# IamFloat
Float: left;
Margin: 5px; / * IE understood to 10 px * /
Display: inline; / * IE 5 under further understanding px * /)
3, covered containers on relations
Very often, especially containers, parallel layout, for example, two or three float the div, width very easily have a problem. In IE, will be the width of the outer lining broader div crowded break. Firework must use Photoshop or measure pixel accuracy.
4, on the issue of height
If it is dynamically add content, it is best not high definition. The browser can automatically extendable, but if the content is static, the best height for good. (Sometimes it seems that will not automatically descend distraction, I do not know specifically how the case)
5, the most ruthless means -! Important;
If there is no way to resolve some of the details, this method can be used. FF for! "Important" priority will be automatically analytical, but IE will be overlooked. Below. 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, it must xxxx! Important this place in another one on the top already mentioned
Tags: css effects firefox
Leave a Reply