IE6 is compatible with the inline-block method, and ie6 is compatible with the inline-block method.

IE6 is compatible with the inline-block method, and ie6 is compatible with the inline-block method.

Some may say that IE does not support the display: inline-block attribute, indicating that it has doubts or objections. "I always use display: inline-block for inline elements such as a or span in IE ".

In fact, 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 the inline element has the display: inline-block Attribute Table disease. 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 the row layout, so after the triggering, the block element is still the row layout, instead of submitting an inline object as a block element in Opera.

How can I implement the display: inline-block effect for block elements in IE?

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 (... Is omitted from other 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 ). The Code is as follows:

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