Display: inline-block in css

In many cases, we have to make some block elements display side by side. Generally, floating is required, but when the block elements float to the margin (margin), a double BUG will occur in IE, therefore, we often have to put this block element in an inline element, and then float and margin the inline element. Today, I saw some articles about display: inline-block in Feifei, qinge, And Oolong tea. They are very good. Let's take a look at them and record them.

Display: inline-block
Simply put, the object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed. However, not all browsers currently support this attribute. Only Opera and Safari are supported. FireFox3 and IE8 are said to support this attribute. Firefox2 and IE can use special methods to achieve this effect, next we will discuss

In Firefox2, there are-moz-inline-stack and-moz-inline-box implementations, but these two private attributes may have exceptions in some cases, as shown below:
1. display:-moz-inline-stack
"When the display of the wrapper used by it is inline, the or button contained in it cannot be clicked or selected. You need to use position: relative also hack off this bug "-- Oolong tea
2. display:-moz-inline-box
After this attribute is used, text-align becomes a problem. You must use the private property-moz-box-align of Firefox to solve the problem.
Therefore, we recommend that you do not use-moz-inline-box or-moz-inline-stack.

In IE (except IE8), if the inline-block attribute is valid for inline elements, such as a or span elements, it seems that IE supports this attribute, in fact, it triggers the layout of IE and thus has the table disease of the inline-block attribute. In this way, we have two methods to implement the display: inline-block Effect in IE:

1. Trigger the block element with the display: inline-block attribute, and then define the display: inline so that the block element is presented as an inline object (Principle: this is a classic bug of IE, if the display: inline-block is defined first, and then the display is set back to inline or block, layout will not disappear. The Code is as follows:
Div {display: inline-block ;}
Div {display: inline ;}

2. Set the block element to an inline object (display: inline) and then trigger the layout of the block element through zoom: 1. The Code is as follows:
Div {display: inline; zoom: 1 ;}

In order to allow all browsers to support display: inline-block, the final implementation code is as follows (refer to Feifei: simulating the inline-block attribute of compatibility ):

Display: inline-block;/* supports Firefox3 beta, IE8 beta, Opera, and Safari, and triggers hasLayout of inline elements in IE */

Display:-moz-inline-stack;/* Private Property of Firefox. position: relative must also be used to solve the preceding bug */

Zoom: 1;/* also triggers hasLayout in IE */
* Display: inline;/* once hasLayout is triggered in IE, setting the block element to inline will make display: inline effect similar to display: inline-block */

/* Extend some other attributes that may be used */
Text-indent:-9999px;
* Text-indent: 0;
Font-size: 0;
Line-height: 0;/* To hide text, use these four attributes */
/* In addition, you can use the simplified method to hide the text above: line-height: Super watermark; font-size: 0 ;*/

Overflow: hidden;/* Hide overflow content */

Vertical-align: middle;/* vertical center in the row, large deviation from Opera */

Width :? Px ;/*? Any non-auto value */
Height :? Px ;/*? Any non-auto value */