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

This article shares with you the content of a sample analysis of CSS browser compatibility Hack. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Implementing display:inline-block with IE6/7

There are two ways. The first is to declare the element display:inline-block, trigger its layout, and then declare it as display:inline on the second style, such as:

.test {display:inline-block; / * other styles. * /} .test {display:inline;}

The second method (recommended) is to use IE6/7 's Css proprietary prefix to trigger layout (which feels a bit like js's setTimeout):

.test {display:inline-block; * zoom: 1; * display:inline;}

IE6 double floating line spacing

Under IE6, when a div floats to the left in another div and has a margin-left style, then its left margin is double the style definition, just as if it floats to the right and margin-right, the effect is the same. However, after that, there is no problem with the margin of the floating div, and it is only the first one to have this problem.

At this point, the solution is to simply add a _ display:inline; style to the div

Css hack of IE6-IE10

P {color: black; / * IE10*/ color: orange\ 0; / * IE8,IE9*/ * color: blue; / * IE6,IE7*/ _ color: red; / * IE6*/}: root p {color: yellow\ 0; / * IE9*/}

There is something black in the background of the PNG picture under IE7/8.

That's because you use a filter effect, such as filter:alpha (opacity=100); just remove it.

Elements disappear, cannot be seen, and cannot be clicked under IE7/8 for no reason

There is something in other browsers, but it disappears when you come to IE7/8 for no reason. When this happens, you try to add background:red; to the element or remove the text from the text-indent:-9999em; font-size:0;, change it to font-size:18px; text-indent:0;, and you will find that the missing element finally appears again. For this approach, the solution is to add a background color to the element under IE7/8. But at the same time you don't want the element to be visible, then add opacity:0; filter:alpha (opacity=0)

The style is not fully loaded in IE7/8

That should be the inconsistency between the charset declaration of the css file and the encoding of the file itself. Just correct this.

Thank you for reading! This is the end of the article on "sample Analysis of CSS browser compatibility Hack". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.