Key to compatibility processing
1. DOCTYPE affects CSS processing
2, FF: Set padding, div will increase height and width, but IE will not, it is necessary to use!important to set a height and width
3, FF: Support!important, IE is ignored, can be!important for FF special set style
4, the vertical center div problem: Vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line
5, in Mozilla Firefox and IE in the box model interpretation inconsistent lead to 2px resolution method:
div{margin:30px!important;margin:28px;}
Note that the order of the two margin must not be written in reverse,!important this property ie is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:
DIV{MARING:30PX;MARGIN:28PX}
Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;
Browser differences
1, UL and ol list indent problem
Eliminate the UL, OL and other list of indentation, the style should be written as: list-style:none;margin:0px;padding:0px;
Where the margin attribute is valid for IE, the Padding property is valid for Firefox.
[note] experience, in IE, set margin:0px can remove the list of the upper and lower left and right indent, blank and list number or dot, set padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower spaces, set padding : Only the left and right indents can be removed after 0px, and List-style:none must be set to remove the list number or dot. In other words, in IE, only set margin:0px can achieve the final effect, and in Firefox must be set margin:0px, padding:0px and list-style:none three items to achieve the final effect.
2, CSS transparency issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] It is best to write all two, and put the opacity attribute below.
3, CSS fillet problem
Ie:ie7 The following versions do not support rounded corners.
FF:-moz-border-radius:4px, or-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;- moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;.
[note] The fillet problem is a classic problem in CSS, and it is recommended to use the jquery frameset to set the fillet, leaving these complex questions to others. However, the rounded corners of jquery only see rounded corners that support the entire area, there are no rounded corners that support the border, but the rounded corners of this border can be achieved by some simple means, the next opportunity to introduce.
4, Cursor:hand VS cursor:pointer
Problem Description: Firefox does not support hand, but IE supports pointer, both are hand-shaped instructions.
Workaround: Use pointer uniformly.
5. Different font size definitions
The definition of font size small different, Firefox is 13px, and IE in 16px, the difference is quite large.
WORKAROUND: Use the specified font size such as 14px.
Between a div and a div with multiple elements (images or links) arranged in parallel, the spaces and carriage returns in the code are ignored in Firefox, whereas in IE the spaces are displayed by default (about 3px).
6. CSS double-line bump border
ie:border:2px outset;.
FF:-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors: #404040 # 808080;-moz-border-bottom-colors: #404040 #808080;
Browser bug
1, IE's bilateral distance bug
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.
Solution: Add display:inline to this div;
For example:
< #div id= "Imfloat" >
The corresponding CSS is
The following is the referenced content:
#IamFloat {float:left; Margin:5px;/*ie understood under 10px*/Display:inline;/*ie as 5px*/} #IamFloat {float:left; margin:5px;/* IE under the understanding of 10px*/Display:inline;/*ie under the understanding of 5px*/}
There are too many questions about CSS, and even the same CSS definitions are not displayed in different page standards. A development recommendation is that the page is written using standard XHTML standards, with less table,css defined as much as possible in accordance with the standard DOM, while taking into account the main browsers such as IE, Firefox, opera and so on. In many cases, the CSS interpretation standards of FF and opera are closer to the CSS standard and more prescriptive.
2, ie selector space bug
Today, when you set the first character style for a blog's paragraph style, it turns out that a space can also invalidate the style.
Take a look at the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >
<p> to the world you may be one person, but to one person you may be the world. Never frown, even when you are sad, because you never know who is falling in love with your smile. </p>
</body>
[/code]
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >
This code for <p> 's first character style definition on IE6 is not effective (IE7 not tested), and in P:first-letter and {font-size:300%} plus a space, that is p:first-letter {font-size : 300%}, the display is normal. But the same code, in Firefox, looks normal. According to the truth, p:first-letter{font-size:300%} is the correct way to do that. So where does the problem go? The answer is the hyphen "-" in the pseudo-class. IE has a bug, when dealing with pseudo-classes, if the name of the pseudo-class with a hyphen "-", the Pseudo-class name followed by a space, or the definition of the style is invalid. In the FF, the addition of spaces can be handled normally.
