Inline-block attribute for simulation compatibility_Experience exchange-CSS Tutorial-php.cn

Inline-block attribute for simulation compatibility_Experience exchange

WBOY

Release： 2016-05-16 12:06:15

Original

1475 people have browsed it

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*/