Collation of IE compatibility issues

Preface:

This article attempts to sort out some of the common browser compatibility issues such as IE and FF during web Front-end development, and provides an analytical connection to some of these problems, this gives readers a better understanding of the cause of the problem and makes them more impressed. You can skip part of this article from the right directory.

1. Problems with the hover style after hyperlink access

The hyperlink style accessed by clicking does not have hover and active, many people should have encountered this problem, the solution is to change the CSS attribute arrangement order: L-V-H-A, extension: CSS priority analysis

2. How to enable automatic line feed for continuous long fields in FireFox

As we all know, you can use word-wrap: break-word directly in IE. Since CSS3.0, FF and webkit core browsers also support this attribute, therefore, we can no longer set up js solutions for FF and other products, and expand to read the simple application of white-space word-wrap word-break.

3. Why is the height of the parent container not adaptive under ff?

After the floating attribute is added to the sub-container, the container cannot be automatically opened. The solution is to add a floating element after the label ends. Or, you can view more methods to solve the problem that the parent container height cannot be automatically opened.

4. Double margin BUG of IE6

After floating, the original outer margin is 10 PX, but IE is interpreted as 20 PX. The solution is to add the attribute: display: inline to the floating layer and cancel the attribute of its block-level element.

5. The Container text that is absolutely located in IE6 cannot be selected normally

This problem exists in IE6 and 7. The solution is to enable IE to enter the qurks mode. For more information about qurks mode, click Connect to view Microsoft Help.

6. Why is there a gap in the image under IE6?

There are also many ways to solve this BUG. You can change the html layout, set img to display: block, or set vertical-align to vertical-align: top | bottom | middle | both text and bottom can be solved.

7. IE6 3 pixel text offset BUG

This IE 3PX BUG often occurs: When an element floats to the left, the adjacent text will generate a 3px gap under IE6. The solution is to float: left or define. left margin-right:-3px for adjacent texts;

8. list-style-image cannot be accurately located

The positioning of list-style-image is also frequently asked, because different browser cores resolve list-style-image to different locations, the solution is generally to use the li background simulation. Here the relative positioning method can also be used.

9. How to vertically center text

Set the element height to the row height.

<style type="text/css"> <!-- div {height:30px;line-height:30px;border:1px solid red;}--></style>

You can add

vertical-align:middle;

10. How to center a layer vertically in the browser

Here we use the absolute percentage position, and the method of negative value of the external patch, the negative value is its own width and height divided by two

<style type="text/css"> <!-- div {position:absolute; top:50%;lef:50%;margin:-100px 0 0 -100px; width:200px; height:200px;border:1px solid red; }--> </style>

11. Collapse of outer margin of adjacent non-floating elements of IE

For block-level elements (display: block), the upper and lower boundaries of unfloating vertical adjacent elements are compressed. For example, there are two upper and lower elements, the bottom boundary of the above element is 5px, and the upper boundary of the following element is 20px, the actual spacing of the two elements is 20px (the larger value of the two boundary values ). For details, refer to the Box model of doumao)

12. IE7-margin-bottom does not work

Today (2011.5.23), when modifying the page layout of a group buying website, I found a very strange problem. The bottom margin of the last DOM in IE does not work, after careful observation, we found that the outer distance was added to the parent element, but it was displayed normally under FF and CHROME. Finally, we found a post in blue ideal to add zoom: 1 to the parent element, solved the problem. But I still don't know the specific cause of this problem. Is it a BUG inherent in IE that can be solved by using haslayout?

More content is being updated.

13. IE6 duplicate character BUG

This BUG occurs when there are multiple annotations between the first and last elements of a series of floating elements. The first two annotations have no effect, however, subsequent comments will lead to repeated characters. A very strange BUG, which seems to be related to the 3px offset, can be corrected by setting the right blank side of the negative value, but the best way is to delete the gaze or put it in another position.

14. IE6 BUG

When the height of a floating element is greater than the text height of the parent element, and the background color is set for the parent element, and the floating is cleared at the end, the text in the parent element is hidden. For more information, see IE6.