Problems and summary of compatibility with IE browser

1, if directly to an element set absolute positioning. When the browser is zoomed in. Position will be misplaced. The workaround is to set the outer element to relative positioning.

2, low version IE browser does not support placeholder property

3, the box model specifies the vertical boundary overlap, if the parent element has an upward margin value (10px), its child element has an upward margin value (20px). The overlapping part takes the larger. So there is a 20px gap between the parent element and the previous Div.

4, the use of display:inline-block will cause gaps between the elements, the solution: The parent element is set font-size:0 or floating method;

5,ie 8 and below do not support the wording of transparency, the low version of the Internet Explorer Transparency Filter:alpha (opacity:).

6, in Google Chrome, an Li tag there is a tag and a span,li label floating, a label will be more than a few px next. The workaround is to float the a tag

7, to make the background image use IE-CSS.HTC's Border-radius property. There is a bug. Difficult to use. It's best to change the background to IMG.

8, about how to use IE-CSS.HTC. Z-index is larger than the surrounding elements; the path in the behavior is best written as an absolute path.

9,ie Browser Low version of a bug, transparent elements do not respond to the hover event!

10, it is time to make a distinction between IE8,IE9 's hack. Use/9,/9/0 to implement. Find out if the color of the hack. can achieve the purpose. If you do Margin-top's hack. It is found that the effect achieved under ie8,9 is the same. So guess this hack only supports partial attributes

11, in IE8 background:url (. /images/goods.png) No-repeat!important; Background picture does not appear

Background:url (.. /images/goods.png) No-repeat!important; The background image is displayed. The gap is just a few more spaces.

Trigger in 12,jquery cannot trigger hover

13, in the low version of IE browser implementation of the use of PIE.HTC method and to make the background transparent method

Background:url (.. /imgs/news-circle.png) no-repeat Rgba (0,0,0,0.5);

-pie-background:url (assets/common/imgs/news-circle.png) no-repeat Rgba (0,0,0,0.5); /* Path relative to the HTML page */

-ms-border-radius:350px 350px 0px 0px;

border-radius:350px 350px 0px 0px;

Behavior:url (PIE/PIE.HTC);/* path relative to HTML page */

14, when using the button tag or input type= "button" or input type= "submit" under IE 6. and add the border attribute to them. Will find the outer layer around a white gap. The workaround can give it its own CSS property Border:none 0, and add a nested layer to it. Add a border property to the nested layer.

15, the Padding-bottom attribute is found to be invalid under IE7. The solution is to add attribute Overflow:hidden;

16, the Padding-bottom attribute is found to be invalid under IE6. The workaround is to set the Margin-bottom value to the last element that he nested.

17, in IE 6 the element has the default row height. The solution is overflow:hidden; font-size:0; or line-height:xx px;

18,ie 6 fast element to float. And with a horizontal margin, the actual margin will be one more than the margin set. The solution is display:inline;

19, in each browser IMG has a gap (the reason for carriage return). The solution is to let the picture float or add font-size:0 to the image's containing layer.

20, two block elements, vertical margin value does not increase, will overlap, its spacing is the largest margin value.

21,ie6 not supported for!important property

22,z-index the bug that does not work:

1) IE6 first of all, the first Z-index no matter how high the setting is. There are three conditions for this situation: 1, the parent Tag position property is relative;2, and the problem label contains a floating (float) attribute.
2) All browsers: it only recognized the first dad.
The level of high and low not only to see themselves, but also to see their dad this backstage is hard enough. The term is described specifically as:
When the parent tag position property is relative or absolute, the absolute property of the child label is relative to the parent tag. And in IE6, the performance of the hierarchy is sometimes not to look at the z-index of sub-labels, but to see their parent tag z-index who is high and low.

23,css hack:

_height:100px; /*ie 6 Dedicated */

*+height:100px; /*ie 7 Dedicated */

*height:100px; /*IE6,IE7 Shared */

height:100px\0; /*ie8,ie9,ie10 Shared */

height:100px\9; /*ie6,ie7,ie8,ie9,ie10 Shared */

height:100px\9\0; /*ie9,ie10 Shared */

Problems and summary of compatibility with IE browser