A deep understanding of the display: inline-block attribute of CSS

The display: inline-block attribute is often exposed when CSS is used for performance. Whether it's a friend who has been familiar with Web standards or standards for a long time, metropolis is confused and vague about this attribute.
Display: inline-block
The object is presented as an inline object, but the content of the object is presented as a block object. The inline object next to it will be presented in the same row and spaces are allowed.
Not all browsers recognize this attribute.
Supported browsers include Opera and 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 ). However, in Firefox, there are private attributes-moz-inline-box and inline-block. Why is it "like" rather than "God like? This is because the use of-moz-inline-box will bring many unexpected sequelae. For example, after using this attribute, text-align sometimes has problems, you have to use the private property of Firefox-moz-box-align to solve the problem (thank you for providing the aoao case ).
Suggestion: it is best not to use the Firefox private property-moz-inline-box.
Some friends may not support the display: inline-block attribute for the IE mentioned above, indicating that they have doubts or objections. "I always use display: inline-block for inline elements such as a or span in IE ".
In fact, in IE, the use of display: inline-block for inline elements, IE is not recognized, but the use of display: inline-block will trigger layout in IE (if you are unfamiliar with layout, refer to the On having layout translated by old9), so that the inline element has display: table disease of the 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.
Extended question: 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 ;...}