Display: block/inline-block

Block Element features:

Each time it starts from a new line;

You can set the width, height, line height, and top and bottom margins;

<Div> <ul> <ol> <li> <DL> <DT> <DD> <Table> <form> <p> <HR/> <textarea>

Row Element features:

Same line as other elements;

You cannot set the width and height, line height, and top and bottom margins;

<Span> <var> <em> <strong> <imput> and so on

Display: Block: Set the row element as a block element. It is used when some row elements need to set the width and higher attributes. You can set the background color of a block element with the same width as the text without setting the width.

Display: inline; set the block element as a row element. When the block element needs to be in a row, for example, horizontal list navigation;

Display: inline-block: You can set the element to an in-row block. It indicates that the surrounding elements do not wrap, but the attributes of block-level elements can be used in the element;

Not all browsers support this attribute. Currently, the following browsers are supported: Opera and Safari use display: inline-block for inline elements in IE. ie does not recognize this attribute, but display: inline-block triggers layout in IE, so that the inline element has the table disease of the display: inline-block attribute. 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 (... 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 ). The Code is as follows:

Div {display: inline; ZOOM: 1 ;...}