The support of Display:inline-block is not good under IE6/IE7. 1. When the display property of the inline element is set to Inline-block, all browsers are supported; 2, when the display property of the block element is set to Inline-block, the Ie6/ie7 browser is not supported, and the object is presented as an inline object. But the object's content is presented as a block object. Adjacent inline objects are presented on the same line, allowing spaces. (To be precise, the element that applies this attribute is now an inline object, the surrounding elements remain on the same line, but you can set the properties of block elements such as width and height). The inline element in IE uses Display:inline-block,ie, but uses display: Inline-block in IE will trigger layout, so that the inline element has the characterization of the Display:inline-block attribute. From the above analysis, it is not difficult to understand why ie, the block element set Display:inline-block property can not achieve inline-block effect. At this point the block element is simply triggered by the display:inline-block layout, and it is itself a row, so after the trigger, the block element is still the row layout, but not as the block elements in opera as an inline object. IE6 How does the next block element achieve the Display:inline-block effect?
There are two ways of doing this:
1, first use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block elements presented as inline objects (two display to be placed in two CSS declarations to have effect, this is a classic IE bug, If Display:inline-block is defined first, then the display is set back to inline or block,layout does not disappear). The code is as follows (...). Other attribute content omitted):
div {display:inline-block; ...}
div {display:inline;}
2. Set the block element directly to inline object presentation (set property display:inline) and then trigger the layout of the block element (for example: zoom:1 or float property, etc.). The code is as follows:
div {display:inline-block; _zoom:1;_display:inline;}/* Recommended */
div {display:inline-block; _zoom:1;*display:inline;}/* Recommended: ie67*/
Block-level element ie6/ie7 Inline-block Solution
