A deep understanding of CSS Performance attribute Display:inline-block

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 will bring a lot of unexpected sequelae, such as the use of this attribute, text-align sometimes have problems, but also have to switch to Firefox private property-moz-box-align to solve (thank Aoao to provide a 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 use of Display:inline-block,ie elements are not known, but using Display:inline-block in IE will trigger layout (if you feel unfamiliar to layout, you can see old9 translation of " On a having layout), so that the inline element has a Display:inline-block attribute 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 does ie block element achieve display:inline-block effect?

There are two ways:

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):

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:

div {display:inline; zoom:1;}