About display under ie7: inline-block example tutorial

About the solution for display: inline-block; not supported under IE7

I encountered this problem while coding today.

If it is an inline element, all browsers support it when its display attribute is set to inline-block.

On the contrary, if it is a block-level element, set it to display: inline-block; then ie6/ie7 does not support it.

In IE, display:inline-block is not recognized by IE for inline elements. However, using display:inline-block will trigger layout under IE, thereby making inline elements It has the representation of display:inline-block attribute.

At this time, the block element is only layout triggered by display:inline-block, and it itself is a row layout, so after triggering, the block element is still in row layout, and will not be as Block elements in Opera are rendered as inline objects.

Solution:

1. (This is what I used this time)

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 or float attribute, etc.). The code is as follows:
/*Recommended: IE6, 7*/DIV {

## Display: Inline-black;

##                                                                                                        }

All three are indispensable.

#                                                            2 , (copy over)

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 Display must be placed in two CSS statements one after another to be effective. 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;}

The above is the detailed content of About display under ie7: inline-block example tutorial. For more information, please follow other related articles on the PHP Chinese website!