A deep understanding of CSS attribute display: inline-block

Author: Silence

The display: inline-block attribute is often exposed when CSS is used to implement the performance. The attribute is very vague.
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 (display: inline-will be supported in firefox3-
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 must use the private property-moz-box-align of Firefox to solve the problem.

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 ".

Otherwise, display: inline-block is used for inline elements in IE. ie does not recognize any other elements, but display: inline-
Block triggers layout in IE, so that the inline element has the table image of the display: inline-block attribute. From the above analysis, it is not difficult
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
Layout is triggered by display: inline-block, and it is the row layout. After triggering, the block element is still the row layout, instead of being like in opera.
The block elements are presented as inline objects.

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, and then define the display: inline so that the block element is presented as an inline object (two
Display must be placed in two CSS statements to achieve the effect. This is a classic bug in IE. If you define display: inline-
Block, and then set the display back to inline or block. layout will not disappear ).CodeAs follows (... Is omitted from other attributes ):

Example source code [Www.52css.com] 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:

Example source code [Www.52css.com] Div {display: inline; ZOOM: 1 ;...}