Display: inline-block is not supported in IE6 or IE7.
1. When the display attribute of the inline element is set to inline-block, all browsers support it; 2. When the display attribute of the block element is set to inline-block, IE6/IE7 is not supported; The object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same line, with spaces allowed. (To be precise, the elements applying this feature are currently inline objects, and the surrounding elements are kept in the same row, but attributes of block elements such as width and height can be set) In IE, display: inline-block is used for inline elements. ie does not recognize any other elements, but layout is triggered when display: inline-block is used in IE, so that inline elements have display: inline-block attribute characterization. From the above analysis, it is not difficult to understand why setting the display: inline-block attribute for block elements in IE cannot achieve the effect of inline-block. At this time, the block element is only triggered by the display: inline-block layout, and it is a row layout. Therefore, after the block element is triggered, it is still a row layout, instead of submitting an inline object as a block element in opera. In IE6, how does one implement display: inline-block?
There are two methods:
1. Use the display: inline-block attribute to trigger the block element first, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS declarations to achieve the effect, which is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The Code is as follows (... for other omitted attributes ):
Div{Display:Inline-block;...}Div{Display:Inline;}
2. Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (for example, Zoom: 1 or float attribute ). The Code is as follows:
Div{Display:Inline-block;_ Zoom:1;_ Display:Inline;}/*Recommendation*/Div{Display:Inline-block;_ Zoom:1;* Display:Inline;}/*Recommendation: ie67*/