A year ago, there was no article on the inline-block attribute on the Internet. In order to facilitate everyone to better understand the attribute, I summarized and compiled the article "Depth: In-depth understanding of display: Inline-block".
Now there is an increasing demand for the application of inline-block attributes. Unfortunately, only Firefox3 beta, IE8 beta, Opera, and Safari support the inline-block attributes (Note: Only Opera and Safari support them), but IE6 and IE7 can simulate by triggering hasLayout. Firefox2 has -moz-inline-box and -moz-inline-stack private attributes (the comparison of these two attributes is quoted from Qin Ge's "Two Examples of Application of Display: Inline-block").
In actual applications -moz-inline-box will have problems such as alignment between elements. Although Firefox also has a private property -moz-box-align to help solve the alignment problem, it is still difficult to predict many problems. Relatively speaking, -moz-inline-stack performs more like inline-block, which can be tested in Firefox3. However, there will also be a bug when using -moz-inline-stack. If the outer element of a display:-moz-inline-stack; is displayed:inline; which will make the links contained in Firefox unclickable, and this needs to be solved by position:relative;.
The final code we simulated is as follows:
display:inline-block; /*Firefox3 beta, IE8 beta, Opera, Safari support, hasLayout triggering the inline element under IE*/
display:-moz-inline-stack; /* Firefox's private attributes, you can also use -moz-inline-box */
zoom:1; /*IE trigger hasLayout*/
*display:inline; /*Once hasLayout is triggered under IE, 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, these four attributes can be used*/
/*In addition, the text hidden above can be hidden, and a more simplified method can be used: line-height: super large value; font-size: 0; */
overflow:hidden; /* Hide overflow content*/
vertical-align:middle; /* vertical centering within the line, for Opera's larger deviation*/
width:? px; /*? is any non-auto value*/
height:? px; /*? is any non-auto value*/