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 , using Display:inline-block causes gaps between elements, workaround: Parent element Settings font-size:0 or using floating methods ;

5, IE 8 and below do not support the wording of transparency , the low version of IE browser transparency notation Filter:alpha (opacity:).

6, in Google Chrome, an li There is a in the label. a tag and a span li label floating, a next to the label will be a few more px a label floating

7, to make the background picture use the ie-css.htc 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 low version of a bug, transparent elements do not respond to the hover Event!

10, making a difference IE8 IE9 hack /9,/9/0 hack margin-top font-family hack ie8,9 hack Only partial properties are supported

One , in the 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