Display: inline-block attributes
CSS to achieve performance in the use of the time, this property will feel very confused and ambiguous.
Display: inline-block
Submit to the will of the target object, but the object content as a block objects filed. Within the next target will be filed in the same line, allowing space. But for this property is not all browsers identification.
Supported browser: Opera, Safari
I regret that the most popular IE and Firefox does not support this property (said to the next version of Firefox will support display: inline-block). But there are private property under Firefox - moz-inline-box and inline-block shape, why is the "shape" rather than "Spirit"? This is because the use - moz-inline-box will bring a lot of unexpected side effects, such as the use of this attribute, text-align sometimes then there will be problems, it has to switch to Firefox's private property - moz-box-align to solve (Thank you aoao provide case).
Recommendations: It is best not to use Firefox private property - moz-inline-box.
Perhaps the friend mentioned above will not support IE display: inline-block attributes that doubt or opposition. Said: "I am in IE or in a span of the elements such as the use of display: inline-block has been effective."
In actual fact, in IE use elements of the internal display: inline-block, IE is not identified, but the use of display: inline-block under the IE would trigger layout (if you feel the unfamiliar layout, the translation can see old9 "On having layout"), so that in conjunction with the display elements: inline-block attributes of the table. From the above analysis, not difficult to understand why IE, block elements of the display settings: inline-block property can not be achieved inline-block results. Then block element is only display: inline-block triggered a layout, and it is to this layout, triggered after block layout elements still the trip, and not block elements such as Opera in the presentation of the object.
Extension of a question: IE elements of how to achieve the next block display: inline-block effect?
There are two ways:
1, the first use of display: inline-block attributes trigger block elements, and then the definition display: inline to block the submission of the elements within the target (two to have on display two CSS statement only effect of this is IE a classic bug, if the first definition of the display: inline-block and then set to display inline or block, the layout will not disappear). Code as follows: (… other attributes content omitted):
Div (display: inline-block ;…}
Div (display: inline;)
2, block elements directly within the target set for the submission of (attribute settings display: inline), and then trigger the layout block elements (such as: zoom: 1). Code as follows:
Div (display: inline; zoom: 1 ;…}
Tags: css attributes, css display, Display, xhtml attributes
Leave a Reply