CSS compatibility differences and solutions in Firefox and IE

1.css shows different effects in different browsers

Firefox and IE have a number of differences in the identification of some CSS styles, including:

• UL and ol default padding value is not the same, in Firefox ,padding-left Default value of 40px About , and IE in 0, general set ul{margin:0;padding:0;} We can solve most of the problems.
• The definition of font size small, Firefox is 13px, and IE in 16px, the difference is very large, can only be set to 14px;( not found at the moment )
• Multiple elements (pictures or links) in the code of the space and carriage return will cause the gap between the elements, and in Firefox and in IE, the display is not the same, ie display space (about 8px), Firefox display space (about 4px)
• For the compatibility of irregular code different, ie in the missing off symbol on the display does not affect, and Firefox will form the layout of the disorder, and in IE used in the padding and margin negative will be Firefox resolution 0, easy to cause the layout of the confusion; (I feel like negative values are also shown in Firefox )
• Firefox for the long high size of the strict resolution will cause with the set does not match (out of) the picture or table will be the original set div braces;
• ！ The important property can work in other browsers other than IE, so someone uses the difference to make a CSS compatible with multiple browsers;
• The div with undefined ID is related to other settings in the Div property in IE, and the position in Firefox is related to the position of the div in the file, followed by the previous Div appearing ... (yet to be tried)
• The div set to float will double the margin set under IE, especially the margin-left, which is a bug of IE6. The solution is to add display:inline to the div;
• If you are adding content dynamically, it is best not to define the height. The browser can scale automatically, however, if it is static content, the height is best set. (Sometimes it doesn't seem to go down automatically, don't know exactly what's going on)
• Ff:div set Margin-left, Margin-right is already centered when auto, IE not. IE set the Text-align:center in the center, but not in FF. So the general two must be set.
• FF: Set padding, div will increase the height and width, but IE will not, it is necessary to use!important more set a height and width (also no feeling, feel set padding, everyone's width have changed)
• In the FF can be implemented DIV vertical center problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines. This method can not be implemented in IE. (have tried!) Useful)
• FF: Link with border and background color, set Display:block, and set Float:left guarantee No line wrapping.
• The float (float) div is followed by the Clear property, which resolves the background adaptive height problem. How to add to make different browsers to do? There is a default row height in IE, which is the problem to be solved.
• FF does not support the automatic change of text; What Word-wrap:break-word;word-break:break-all is the ghost of IE, does not conform to the CSS standard. (the solution that is now seen is implemented programmatically)

2.CSS solution to the compatibility of different browsers (not the method we need, we want to meet the requirements is to try not to write!important can also solve)

To solve this problem, we can standardize the CSS code to conform to the standard style of two kinds of specifications, and can also use it in different places. Important to Firefox settings properties, or for a variety of browsers to configure the appropriate CSS files, and then by determining the browser to choose different CSS to achieve compatibility.

The code is as follows:

#example {color: #333;}/* ff*/
* HTML #example {color: #666}/* IE6 * *
*+html #example {color: #999;}/* IE7 * *

The font color shown in IE6 is #666; the font color displayed in IE7 is #999; the color displayed in FF is #333

3.FF The adaptive height problem of solving the background

① for the background can not automatically extend the reason above said very clearly, the solution is to nest a layer, this layer set floating, and assume the background, OK.
Here's a quick hint.

You can understand this:float makes the layer automatically wide and high

But with a third approach, this approach doesn't seem to be worth recommending.

② Another way is to give the first div a property value: display:table, but this method can cause some other layout errors. You may consider using it, but not recommended.

③ I think this is the most important method, but there are many problems in the middle. The method is Clear:both.

The. Clear{clear:both} can extend the height downward, but the row height is automatically generated;

The. clear{clear:both;height:0} cleared the row height in FF, but IE was not recognized;

. clear{clear:both;height:1%} is still not recognized in FF and IE;

As previously written. Clear{clear:both;height:1%;font-size:0px;overflow:hidden} works in IE, but it does not allow the background color to continue in FF unless you add a border. ! It's funny, I don't know.

. clear{clear:both;line-height:1px} ! I understand it's clear. This container defaults to the line element, so the high does not work for it, so you can set the height to a few no effect, and line-height itself is acting on the line elements, so so!

The above understanding is not! Re-understanding is: IE has the default row height, you must clear the row height, you can use font-size:0px or line-height:0px; but there is another problem, is that the height of the value do not use a percentage, no use!