Display: inline-block compatible ie6/7 writing, inline-blockie6

Display: inline-block compatible ie6/7 writing, inline-blockie6
2. What is the function of display: inline-block?

Using the display: inline-block attribute, you can change an element or block element in the row into a block element in the row. Simply put, you can define the width and height without adding the float attribute, at the same time, this element can be easily displayed in the center of the parent element!

3. When will display: inline-block be used?

In website layout, in many cases, sub-elements use intra-row elements such as span or block element li tags, and the number of tags is not fixed, however, we want this part to be displayed in the center regardless of the number (the overall width of the sub-element is not fixed! Display: inline-block can be used in this case!

4. Does ie6/7 Support the display: inline-block attribute?

Define the display: inline-block attribute on the inline element. It is found that the display effect in IE6 and IE7 is the same as that in other browsers. However, ie7 and earlier versions do not support display: inline-block attribute!
The correct explanation is that "using the inline-block attribute will trigger layout in IE, so the width and height set on the element can take effect, therefore, the display effect is consistent with that of other browsers. "IE6/7 cannot support display: inline-block!

5. Only display: inline-block needs to be defined for in-line elements. The display effect is consistent among all browsers. How can the display: inline-block effect be achieved for the block elements in IE7 ??

In IE, the display: inline-block only triggers the layout of the element. For example, if you set the display: inline-block to the div, you can only ensure that the div has the features of the block element (you can set the width and height), but still generate a line break. Set display: inline to avoid line breaks. Write the display: inline-block; * display: inline; in the same style. The inline-block attribute does not trigger layout of the element. Therefore, we need to add * zoom: 1 to trigger layout!

6. How can block elements in IE7 be compatible with the display: inline-block writing method?

There are two effective methods:

Method 1: Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (for example, zoom: 1 ). Code compatible with various browsers: div {display: inline-block; * display: inline; * zoom: 1 ;...}
Method 2: Use the display: inline-block attribute to trigger block elements, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS style declarations to achieve the effect first. This is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The Code is as follows: div {display: inline-block ;...} Div {* display: inline ;}

7. The display: inline-block elements will generate redundant spaces. How can this problem be solved?

The display: inline-block elements will generate extra spaces. This is the feature of inline-block!
Strictly speaking, it is not a BUG. You can use the font-size setting to solve the problem and solve the redundant blank space between the display: inline-block elements.

Reprinted from: http://aspnetjia.com/Cont-95.html