The difference between Display:inline-block display:-moz-inline-box display:-moz-inline-stack in CSS

Source: Internet
Author: User

Most of the time we have to make some block elements appear side-by-sides, and it is common to think of the need to use floats, but the block elements float to the margin (margin)
There will be double bugs in IE, so it is often forced to put this block element inside an inline element, and then give the inline element

float and margin. Today read this article is good copy came to hope that you do a reference:

Display:inline-block
In simple terms, the object is presented as an inline object, but the object's content is presented as a block object. Inline objects next to each other are presented on the same line
Inside, spaces are allowed. But this property is not currently supported by all browsers, only opera and safari support, FireFox3 and IE8
It is said that will support, Firefox2 and IE use special methods can achieve this effect, the following to explore

There are -moz-inline-stack and -moz-inline-box implementations in Firefox2, but both of these private properties will
There is an exception, specifically as follows:
1, Display:-moz-inline-stack
"When the display of the outer wrapper (wrapper) applied to it is inline, it contains a or button that cannot be clicked or
Cannot select, need to pass position:relative also hack this bug "--Oolong tea
2, Display:-moz-inline-box
With this attribute, Text-align will have problems, and you must use Firefox's private properties-moz-box-align to resolve
Therefore, it is recommended not to use-moz-inline-box, or to use-moz-inline-stack

under IE (except for the following IE8), if an inline element, such as a or span element, is valid using the Inline-block attribute, it seems that
IE is supported, In fact, it triggered the layout of IE, and thus has the Inline-block attribute of the table disease. In this way we have two ways to achieve display:inline-block effect under
ie:

1, trigger the block element with the Display:inline-block property, and then define the Display:inline, Let the block element be presented as an inline pair
image (principle: This is a classic bug of IE, if display:inline-block is defined first, then display back
inline or block,layout does not disappear), the code is as follows:
div {display:inline-block;}
Div {display:inline;}

2, set the block element directly to an inline object (display:inline), and then trigger the layout of the block element through Zoom:1, with the following code:
Div {display:inline; zoom:1;}

So in order for all browsers to support Display:inline-block, combine the final implementation code as follows (refer to Yiwen:
Impersonation Compatibility Inline-block property):

Display: Inline-block; /* On the one hand Firefox3 beta, IE8 beta, Opera, Safari support, on the other hand, the next touch
under IE inline element haslayout*/

Display:-moz-inline-stack; * Firefox private properties, need to use position:relative to solve the
above mentioned bug */

Zoom:1;/* Same as IE trigger haslayout*/
*display:inline ; /* Once IE triggers the haslayout, setting the block element to inline will make display:inline  the
effect is similar to Display:inline-block */

The difference between Display:inline-block display:-moz-inline-box display:-moz-inline-stack in CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.