Common CSS compatibility problems and solutions in IE browser

For front-end developers, there is a magical thing in the world--ie browser, especially the low version of IE browser, the appalling compatibility makes it infamous. Front-end workers spend a lot of time with it to deal with, so everyone has to spit slot ie browser slag, is simply the source of evil. But the market share of IE browser is very big, after spraying also to engage in compatibility. For IE browser, we should have an objective evaluation. First of all, the compatibility is poor, the reason can be imagined, the update speed is too slow, it will take a few years to release a version, and the market Firefox, Chrome and other browsers have a version listed in a few months. So long in the middle of the time enough to expose its bugs fully, other browsers have no bugs? Of course not! Just the other browser update cycle is short, bug exposure opportunity is small, and repair speed is just. Now on the market, ie browser mainly IE6, IE7, IE8, IE9, IE10, IE11 and other versions, IE5.5 basically disappeared in the market, so the compatibility of the issue we do not discuss. In these versions, and the bugs are mostly focused on IE6, so we'll just fix them. and other browsers if the bug is a bit sore, because of too many versions, such as Chrome, now the version is 30 +. On the other hand is the history of browser wars left behind, IE browser with its pro-dad windows powerful power to occupy the enviable market share, seems to dominate the browser market, many places self-righteous, not with others. For example: The Chrome browser developed a good feature, generally Firefox, Opera, Safari will be developed quickly, and as far as possible, and the response of IE is either ignore you at all, or realize the time there is bias, or achieve the exact same function, But the name must be different from others, in vain to let other browsers follow his specifications, and dominate others. (The above is purely my malicious speculation) then! As you can see, the pro-dad Windows doesn't want it anymore. WIN10 is equipped with Edge browser, OH da. Now let's get to the point and discuss some commonly used IE browser bugs and solutions (the qualifications are shallow, there is a wrong place to look):

Ps:ietester developer tools do not support filters, as long as they are written in standard notation. The use of the edge of the simulation version of IE browser effect is not consistent with the actual version of the effect, fixed part of the bug, may be Microsoft to the face of white.

One, IE does not support the part

1, IE6 incompatible point line, if the effect is not to cut the background tile;2, IE6 border does not support transparent;3. IE6 only supports pseudo class of a tag, IE7 supports the pseudo-class of the element, but does not support the form's focus;4, IE6, 7 does not support Display:table,inline-block and other attributes;5, IE6, IE7 does not support Min-width, Min-height, Max-width, max-height;6, IE6, 7 filter to write this: Filter:alpha (opacity=56);7, IE6 incompatible fixed positioning, only with JavaScript to solve;8, IE6 does not support the transparency effect of PNG images;9, IE6, 7, 8 transparency can only be achieved through the filter;

Try to follow the element nesting specifications, such as not using the P tag to pack H tags.

If there are two spans in a Div, the two spans must be vertical-align:middle vertically.

Second, compatibility problems and solutions

1, IE6 bilateral distance bug:

Under IE6, the block element has floating and transverse margin values, and the horizontal margin becomes twice times. is related to the margin direction.

Workaround: Turn the block element into an inline element. Display:inline;2. IE6 child elements can open the parent element:Workaround: Perform a precise calculation of the parent-child relationship. Of course, you can hide the excess child elements by Overflow:hidden. 3. If the element floats, the line is all floating. Otherwise there will be margin problems (mainly IE6) and even exotic problems, other browsers seem to have4. If you add a background to input, the background will move when the input exceeds the input frame length:workaround: Put input in the Div, let the background of input transparent, and the background to the Div. 5.IE6, 7 A few px gap problem: Li itself does not float, but the content of the float let Li more than a few PX gap.    Solution: 1, to Li Plus floating, 2, to Li Plus vertical-align:top/middle/bottom can also be used to clear the picture of the gap picture can also be display:block; solve, but the number of pictures of peers will not be 6, IE6 minimum height problem: Elements with a height of less than 19px will be treated as 19px. Solution: 1, add font-size:0, the solution has limitations 2, overflow:hidden;

7. IE6 the relative positioning of the parent element under the child level

Workaround: Position the parent Element 8, IE6 the parent width of the positioned element is odd, then the right and bottom of the positioned element under IE6 have a 1px deviation. Can't be solved. 9, in the IE6, to solve the margin transfer, trigger haslayout,zoom:1; Other browsers can use Overflow:hidden; this is actually not IE bug, the browser has this problem, It can also be solved by adding up or down padding or border. 10, IE6, when the parent element has a border, the margin of the child element disappears: the solution is ibid. 11, IE6: When the sum of the width of a row of children and the parent is greater than 3 pixels or if there is a state of discontent, the last line of the Margin-bottom will disappear. There is no way to solve it. 12, IE6: When the Li Gap problem and the IE6 minimum gap exists (Li itself does not float, but the content of which there is a floating gap: to Li plus vertical-align property) Solution: Overflow:hidden,float:xx;13, IE6 text overflow BUG: When the child element width and the parent element width difference is less than 3px, there are two floating elements in the middle with comments or inline elements. Workaround: Remove the inline or resize the parent. 14, IE6 when the absolute positioning and the floating elements are tied, the absolute positioning element disappears. The solution: Nature is to remove the tie-up relationship. For positioning packages under Div15, IE6, when Thead, Tbody, TFOOT, and the following TR are styled simultaneously, the TR style will replace the parent element's style. There is no workaround. 16, IE6, 7 Enter the type of form control, the default upper and lower 1px margin. Workaround: Leave the control out of the document flow. 17. Input type form control Border:none; Invalid workaround: border:0, or reset the background to input. Third, Hackhack is a good way to solve the compatibility, but now the development is not in favor of use, pay attention to use it sparingly!1. Conditional annotation method (generally used in IE6-IE9): only valid under IE:

<!-- [If ie]>
This text is only displayed in IE browser
<! [EndIf]  -

Only valid under IE6:

<!-- [If IE 6]>
This text is only displayed in IE6 browser
<! [EndIf]  -

Only valid under IE8:

<!-- [If LT IE 8] This text is only shown below IE8 browser <! [EndIf]  -

Only valid for IE6 or later:

<!-- [If GTE ie 6]> this text only appears in the IE6 above (including) version of IE browser display <! [EndIf]  -

Does not take effect on IE8 only:

<!-- [if! IE 8]> This text in non-IE8 browser display <! [EndIf]  -

Non-IE browser effective:

<!-- [if! Ie]> This text is only displayed in non-IE browser <! [EndIf]  -

2. Attribute Prefix method:

Standard mode:

#selector {
-color:red;    /* minus and underscore are IE6 proprietary hack */
color:blue\9;   /* \9 Ie6-ie10 are in effect */
color:pink\0;  /* IE8-IE11 Effective */

*color:yellow; /  * [. *+<>] ie6-ie7 Effective */
}

3. Selector Prefix method :

*+html Selector 　　　{color:blue;} /* *+html prefix only supports IE7 */

Note :

No matter what method, the order of writing is Firefox written in front, IE7 written in the middle, IE6 written in the last side;

IE6 a property after!important will destroy the previous priority.

There are many other browser Hack, here to no longer introduce, a lot of tutorials, introduce a relatively clear CSS Hack

Http://www.duitang.com/static/csshack.html

Four, the offal

1, support PNG picture transparency effect:

selector {
Background-img:url (xx.jpg);
_filter:progid:dximagetransform.microsoft.alphaimageloader (src= "Xx.png", sizingmethod= "crop");
}

2, Analog fixed positioning:

selector {Position:absolute;
Top:expression (eval (document.documentelement.scrolltop+ ( Document.documentelement.clientheight-this.offsetheight)/2));}

Common CSS compatibility problems and solutions in IE browser