Inline-block Properties of Simulation compatibility _ Experience Exchange

And now there is more and more demand for inline-block attributes, but still only Firefox3 beta, IE8 beta, opera, Safari support Inline-block attributes (note: Originally only Opera, Safari support), but I E6, IE7 can be simulated by triggering haslayout, Firefox2 have-moz-inline-box and-moz-inline-stack private properties (The comparison of these two properties is quoted from the "Display of Qin song": Two cases of Inline-block application).

In the actual application of-moz-inline-box will exist between elements of the alignment and so on, although Firefox has a private property-moz-box-align to help solve the alignment problem, but still unpredictable problems, and relatively-moz-inline-stack Performance is more like Inline-block, which can be tested in Firefox3. But-moz-inline-stack will also have a bug when used, if a display:-moz-inline-stack; The element outer element is display:inline; That will make Firefox contains the link is not point, this need to use position:relative; To solve.

Finally, we simulate the following code:
Copy CodeThe code is as follows:
Display:inline-block; /*firefox3 Beta, IE8 beta, Opera, Safari support, haslayout*/for inline elements triggered under IE
Display:-moz-inline-stack; /* Firefox's private properties can also be used-moz-inline-box */

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

text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* If you want to hide text, use these four properties */
/* In addition to the above hidden text, you can also use a more simplified method: line-height: Super large value; font-size:0; */

Overflow:hidden; /* Hide spilled content */

Vertical-align:middle; /* Vertical Center in line for Opera's larger deviation */

Width:? px /*？ Is any non-auto value */
Height:? px /*？ Is any non-auto value */

