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
Quote:
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 ).
Suggestions: 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 ;...}
Http://www.cnbruce.com/blog/showlog.asp? Cat_id = 5 & log_id = 1091