The magical property of Display:inline-block in CSS

Display:inline-block attribute usage in CSS

When you use CSS to implement performance, you will often be exposed to the attributes of Display:inline-block, whether it is the first contact with the Web standards or contact with the standard of a long time friends, most of this attribute feel very confused and blurred.

Display:inline-block

The object is presented as an inline object, but the contents of the object are rendered as a block object. Adjacent inline objects are presented in the same line, allowing spaces.

However, this property is not recognized by all browsers.

Supported browsers are: Opera, Safari

Unfortunately, the most popular IE and Firefox do not support this attribute (it is said that the next version of Firefox will support Display:inline-block). But Firefox has private properties-moz-inline-box and Inline-block shape, why is "shape" rather than "spirit"? This is because the use of-moz-inline-box can bring a lot of unexpected sequelae, such as using this property, Text-align sometimes have problems, and you have to use Firefox's private property-moz-box-align to fix it (thank Aoao for the case).

Recommendation: It is best not to use Firefox private property-moz-inline-box.

Perhaps a friend of the above said IE also does not support the Display:inline-block attribute, expressed doubt or opposition. said: "I am in IE to a or span and other inline elements using Display:inline-block has been effective."

In fact, in IE in the inline elements using Display:inline-block,ie is not known, but the use of display:inline-block in IE will trigger the layout, so that the inline element has display: Inline-block Properties of the table. From the above analysis, it is not difficult to understand why IE, the block elements set display:inline-block properties can not achieve inline-block effect. At this point, the block element is only triggered by the Display:inline-block layout, and it is the row layout, so the trigger, block element is still the row layout, and not as the block element in opera as an inline object.

Extend a question: how to achieve the effect of display:inline-block under IE block elements?

There are two ways of doing this:

1, first use the Display:inline-block attribute to trigger block elements, and then define the Display:inline, so that the block elements presented as inline objects (two display to be placed in two CSS declarations have effect, which is a classic IE bug, If Display:inline-block is defined first and then the display is set back to inline or block,layout does not disappear). The code is as follows (...). Other attribute content omitted):

Examplesourcecode

Div{display:inline-block;.}

Div{display:inline;}

2, directly let block elements set to inline object presentation (set property display:inline), and then trigger the block elements of the layout (such as: zoom:1, etc.). The code is as follows:

Examplesourcecode

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