Troubleshoot issues with CSS that are incompatible with browsers

Browser incompatibility, we are certainly very repugnant, often we just go to do patching, but forget the more important thing, that is to trace the source, to avoid similar incompatibility again.

In the next, summed up a few HTML coding elements, I hope to show you:
1. The size of the text itself is not compatible. The same is the font-size:14px text, in different browsers occupy the space is not the same, ie under the actual account of 16px, under the white 3px,ff under the actual high 17px, left white 1px, under the white 3px,opera under the same. Solution: Set the text to Line-height. Make sure that all text has a default line-height value. This is important and we cannot tolerate 1px differences in height.

2.ff under the height of the container, that is, the container defines the height, the shape of the container border is determined, will not be content to support large, and IE will be the content of the large, high-limit failure. So don't make it easy to define height for the container.

3. Also discusses the contents of the bursting container problem, horizontal. If the float container does not have a defined width, the contents of the FF are as open as possible to the container width, and the content wrapping is preferred under IE. Therefore, the content may burst the floating container needs to define the width.

Small experiment: We are interested to see this experiment. Test the following code separately under different browsers.


A.<p style= "border:1px solid red;height:10px" ></p> b.<p style= "border:1px solid red;width:10px" > </p>

C.<p style= "border:1px solid red;float:left" ></p> d.<p style= "border:1px solid Red;overflow:hidden" ></p>

The above code in different browsers is not the same, the experiment originated from the use of small height value p, <p style= "Height:10px;overflow:hidden" &GT;&LT;/P&GT;, small height Values to be used in conjunction with Overflow:hidden. The experiment is fun, to illustrate, the browser to the container boundary interpretation is very different, the contents of the container affect the results are different.

4. Floating clearance, the FF does not clear the float is not possible.

Correct everyone a misunderstanding, encounter incompatibility said FF Rotten is wrong, in fact, more often is the strange performance of IE let us at a loss. The following are the IE6 of the various misdeeds.

5. The most hated, Double-margin bug. IE6 the floating container is defined margin-left or margin-right the actual effect is twice times the value. Solution to define the display:inline for the floating container.

6.mirrormargin bug, when the outer element has a float element, the outer element, such as defining margin-top:14px, will automatically generate MARGIN-BOTTOM:14PX. Padding will also appear similar problems, are IE6 under the special products, the situation of such bugs is more complex, far more than this one of the conditions, has not been systematically organized. Solution: The outer element is set to border or set float.

Extension: The Margin-bottom,padding-bottom interpretation of containers under FF and IE is sometimes inconsistent and seems to be relevant.

7. The phenomenon of devouring, confined to space, I will not unfold. Or IE6, up and down two p, above the P setting background, but found that the following does not set the background of P also has a background, this is the devouring phenomenon. Corresponding to the above background devouring phenomenon, there is the phenomenon of scrolling down the border missing. Solution: Use Zoom:1. This zoom seems to be specifically designed to solve IE6 bugs.

8. Annotations can also produce bug~~~ "more than one pig." "This is the previous summary of the use of this bug copy, IE6 this bug, we will see in the page pig word appeared two times, the amount of repeated content due to the number of comments change." Solution: Use "<!–[if!" Ie]> picrotate Start <! [endif]–> "method to write a comment.

9.<li/> Riga float <p/> This is a typical, tricky compatibility issue, hoping to get everyone to face it, give Li different properties will have different interpretations of the effect, the explanation under the FF is slightly understandable, the explanation under the IE6 will let you not touch the mind, due to the complexity of the problem, A separate article would be devoted to the issue. In the "UL use Experience" in the article has related results, but did not give a problem-solving process.

10. Using the "Float:left;display:inline" of the UL's strange performance. Can see this CSS is for IE6 under double margin bug and add display:inline, this is my CSS system is an important link in the "UL use Experience" in the article has related elaboration. And this CSS used in the UL will make you miserable. Donuts, we can't talk more here.