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:

Copy code The code is as follows:

display:inline-block; /*Firefox3 beta, IE8 beta, Opera, Safari support, trigger inline element's hasLayout*/ under IE
display:-moz-inline-stack; /* Firefox's private attribute, also You can use -moz-inline-box */

zoom:1; /*hasLayout is triggered under IE*/
*display:inline; /*Once hasLayout is triggered under IE, set the block element to inline The effect of display:inline will be similar to 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, to hide the text above, you can also use a more simplified method: line-height: super large value; font-size: 0; */

overflow:hidden; /* Hide overflow content */

vertical-align:middle; /* Vertically center the line, for Opera's relatively large deviation */

width:? px; /*? For any non-auto value*/
height:? px; /*? For any non-auto value*/