IE6 compatible inline-block method_html/css_WEB-ITnose

Perhaps some friends may express doubts or objections about IE not supporting the display:inline-block attribute. Said: "I use display:inline-block on inline elements such as a or span in IE and it always works."

In fact, it is not the case. If you use display:inline-block for inline elements in IE, IE will not recognize it. However, using display:inline-block will trigger layout under IE, thus making the inline elements have Symptoms of the display:inline-block attribute. From the above analysis, it is not difficult to understand why setting the display:inline-block attribute on block elements cannot achieve the effect of inline-block under IE. At this time, the layout of the block element is only triggered by display:inline-block, and it is a row layout. Therefore, after triggering, the block element is still in row layout, and will not be rendered as an inline object like in Opera.

How to achieve the effect of display:inline-block on block elements in IE?

There are two methods:

1. First use the display:inline-block attribute to trigger the block element, and then define display:inline to render the block element as an inline object (two displays It has to be placed in two CSS statements one after another to have an effect. This is a classic bug of IE. If display:inline-block is defined first, and then the display is set back to inline or block, the layout will not disappear). The code is as follows (...are other attributes omitted):

div {display:inline-block;...}    div {display:inline;}

2. Directly set the block element to be rendered as an inline object (set the attribute display:inline), and then trigger the layout of the block element (such as: zoom:1 etc.). The code is as follows:

div {display:inline; zoom:1;...}