Shulou(Shulou.com)06/02 Report--

Editor to share with you what common browser compatibility problems are, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article. Let's learn about it!

Common browser compatibility issues:

1.li is the bottom 3 pixel BUG in the IE. Solution: in

It can be solved by adding float:left; on it.

2. Odd width and height BUG in IE6. The solution is to change the div width of the external relative positioning to an even number. The height is the same.

3. IE6 text overflowed BUG. There are several conditions that trigger this kind of BUG:

1) it is caused by comments, just delete all comments.

2) the input of hidden is placed directly under form.

3) div whose display is none may also cause this bug.

4) you can solve the problem by outsourcing DIV again.

Text overflow caused by comments, belonging to the BUG of IE6, the number of words overflowing = the number of comments * 2-1, where the number of words is valid in both Chinese and English numbers. The position of the note is necessarily related to the overflow position, the floating of the block, and the fixed width of the text block.

Solution:

1) No comments are placed. The simplest and quickest solution

2) comments should not be placed between 2 floating blocks

3) include the text block in the new

Between, such as:

↓, this is the extra pig.

4) remove the fixed width of the text block, which is similar to 3

5) add one at the end

Or spaces; (not recommended)

6) use IE comment format, such as Put your commentary in here...

7) add position:relative; attribute to the box

4. Invalidation occurs after the style is commented in Chinese.

Meeting the following conditions causes the styles below the comments to be ineffective:

1) css has comments in Chinese.

2) css is encoded by ANSI.

3) html is encoded by utf-8.

Solution:

1) get rid of the Chinese comments and use English notes.

2.) unify the coding of css and html.

It is suggested to adopt the second solution: ps: css is uft-8,html and ANSI will not fail.

5. Li the BUG of the blank line at the bottom of the IE.

A common problem with lists in IE6 occurs when the content of a li is an anchor (anchor) of a display: block. In this case, spaces between list elements are not ignored and are usually displayed as an extra line sandwiched between each li. One solution to avoid this extra white space in the vertical direction is to give these anchors layout. Another advantage of this is that the entire rectangular area of the anchor can respond to mouse clicks.

Solution:

1) add zoom:1 to the li a style

2) add display:inline to the li style

3) set

The label is written on a line.

4) add width:100% or a width value to the li a style.

It is suggested to adopt the fourth and second solution.

7. The BUG for the absolute positioning of the child element after the parent uses padding.

After the parent layer uses position:relative; and padding (except for the 0 value, of course), the positioning starting coordinates of the middle layer of ie6 are calculated from the position after padding, while the others are calculated from the real position of the layer, not the position changed by padding. This causes ie6 to behave differently from other browsers when using position:absolute for layer positioning.

Solution: add width or zoom:1 to the outer layer.

8. 3-pixel BUG caused by display:none

Solution 1: add the last div to a margin-right:-3px. Such as:

Solution 2: hide the div of display: none in another form. Such as:

9. 3px problem of IE6 pictures

In IE 6, when DIV uses a background image (or inserts a picture directly into DIV), a blank interval appears at the bottom of the picture, which is measured to be 3px.

Solution: the default font size for IE6 is 12pt and the default line height is normal.

1. Add: font-size: 0px to DIV

two。 Set img to "display:block;"

3. Setting the vertical-align property of the picture to "top,text-top,bottom,text-bottom" can also solve the problem.

4. Set the floating property of the picture, "# sub img {float:left;}"

5. Canceling the space between the picture tag and the last closing tag of its parent object is limited to the fact that there is only one picture object in the parent object, and there can be no space between the parent object and the closing tag of the parent object.

10. IE6 double floating BUG

Solution: the solution is to add display:inline.

11. IE6's famous 3px BUG (Guillotine bug)

Two layers, one floats, one does not float, put the floating one in the non-floating layer, you will find a gap between the two, the width is 3px. This problem is the most troublesome one.

Solution:

1) all layers float and set the right layer as a floating layer to eliminate this abominable 3px interval.

2) for the layer on the left, the application of margin-right:-3px;, can also solve IE 3px bug.

12. Invalid line spacing caused by Ie6 picture

Solution: add attributes such as img, input, textarea, select, object and other elements connected to the text margin: (height of the line-height- itself) / 2px 0).

13. After IE6 uses a filter to make the PNG image transparent, the link in the container becomes invalid.

The solution is to define a relative positioning attribute for the link. Position:relative .

Css property settings with compatibility issues

1) body,div, … {margin:0;padding:0;}

2) ul,ol,li {list-style-type:none;}

3) clear {clear:both;height:0;overflow:hidden;}

4) filter:alpha (opacity = 50); filter sets transparency

5) a {text-decoration:none;border:none;}

6) there is float, when there is horizontal margin, ie double spacing, set display:inline.

The above is all the content of the article "what are the common browser compatibility problems?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.