Compatibility with the inline-block property

<br />A year ago, there were no articles about the inline-block property on the Internet. In order to help everyone better understand this property, I summarized and compiled an article "In-depth Understanding of display:inline-block" at that time.
Now there are more and more demands for the use of inline-block attribute. Unfortunately, only Firefox 3 beta, IE8 beta, Opera and Safari support inline-block attribute (Note: originally only Opera and Safari supported it). However, IE6 and IE7 can simulate it by triggering hasLayout. Firefox 2 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 attribute -moz-box-align to help solve the alignment problem, it is still difficult to predict and there are many problems. Relatively speaking, -moz-inline-stack behaves more like inline-block, which can be tested in Firefox3. However, there is a bug when using -moz-inline-stack. If the outer element of an element with display:-moz-inline-stack; is display:inline;, the links contained in it will become unclickable in Firefox. This needs to be solved by using position:relative;.
Finally, the code we simulated is as follows:
display:inline-block; /*Supported by Firefox3 beta, IE8 beta, Opera, and Safari, triggers hasLayout of inline elements in IE*/
display:-moz-inline-stack; /* Firefox's private property, you can also use -moz-inline-box */
zoom:1; /*Triggers hasLayout in IE*/
*display:inline; /*Once hasLayout is triggered in IE, setting the block element to inline will make display:inline have the same effect as display:inline-block*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* If you need to hide text, you can use these four attributes*/
/* In addition, you can use a simpler method to hide the text above: line-height: super large value; font-size: 0; */
overflow:hidden; /*Hide overflow content*/
vertical-align:middle; /* Vertically center the line, for Opera's large deviation*/
width:? px; /*? Any non-auto value*/
height:? px; /*? Any non-auto value*/

<<: Nginx server adds Systemd custom service process analysis

>>: Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications