Inline-block attribute for simulation compatibility_Experience exchange

Nowadays, there is an increasing demand for the use of the inline-block attribute. Unfortunately, only Firefox3 beta, IE8 beta, Opera, and Safari support the inline-block attribute (Note: Originally only Opera and Safari supported it), but IE6 and IE7 can pass Trigger hasLayout to simulate. 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 the 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 alignment problems, it is still difficult to predict that there will be many problems. , and relatively speaking -moz-inline-stack behaves 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; element is display:inline;, it will make the links contained in it unclickable in Firefox. This requires Use position:relative; to solve it.

The final code we simulated is as follows: