Display:inline-block usage in CSS

Before I in the front-end development process has been rarely used Display:inline-block attribute, because in the IE6 I have tried, there are bugs, plus, let an element in a row, I usually use float to solve, over time for this property is increasingly unfamiliar, Even in an interview, the interviewer asked me how to use I do not know, and then carefully think it is their own problems, then I will talk about Display:inline-block, to see what the secret of this goods

One, inline elements and block-level elements

Before I wrote an article detailing the concept of both, if not clear to the students love to click Block-level elements and inline elements.

Second, display:inline-block the object as an inline object, but the object's contents are presented as a block object. Adjacent inline objects are presented in the same line, allowing spaces. But now the browser manufacturers have a people vomit behavior, is the more useful things, he let you use the inconvenient, display currently only Safri and Chorme can perfect support, only IE8 and firefox4 later version only slowly support. Here are some examples for you

Example 1

HTML code:

The code is as follows	Copy Code
<div>1</div> <div>2</div> CSS code: Div{display:inline-block;width:100px;height:100px;background: #f00;}

This code in IE8 above version shows normal, already other browsers are normal, but only in ie67 invalid

And then through the CSS hack processing css for

The code is as follows	Copy Code
Div{display:inline-block;width:100px;height:100px;background: #f00; *display:inline;*zoom:1}

And get the expected results.

Example 2

HTML code:

The code is as follows	Copy Code
<a>1</a> <a>2</a> CSS code: A{display:inline-block;width:100px;height:100px;background: #f00;}

This code is displayed normally in all browsers

Here's a detailed test to see the performance of inline elements and block elements in IE6:

1) inline Element display:inline-block

The IE6 screenshot is as follows:

The code is as follows	Copy Code
. Dib-inline,. Dib-block { width:100px; height:30px; line-height:30px; Text-align:center; } . dib-inline { Display:inline-block; }

Tests show that inline elements in IE6 are similar to Inline-block in the event of triggering a haslayout, where Display:inline-block is set; or zoom:1; Other property values can trigger the Haslayout, which is shown to be the same.


2 Block Element Display:inline-block

The IE6 screenshot is as follows:

The code is as follows	Copy Code
. Dib-inline,. Dib-block { width:100px; height:30px; line-height:30px; Text-align:center; } . dib-block{ Display:inline-block; }

The test shows that the block element in IE6 cannot have the property of inline-block element not wrapping even if the haslayout is triggered. If you want the block element to support the attributes of the inline-block element, we can do this:

The code is as follows	Copy Code
. dib-block { Display:inline; Zoom:1; }

First, the block element is converted to a inline element, forcing it to not wrap, and then triggering the haslayout through zoom:1 to set the width high. After the repair the screenshot is as follows:



3) combined with modern browsers

In comprehensive, modern browsers support Display:inline-block, IE6, 7 inline elements can achieve the same effect, IE6, 7 block elements need to set display:inline; Zoom:1; Together they are:

code is as follows	copy code
display: Inline-block; /* Modern browser +ie6, 7 inline element */ *display:inline/* IE6, 7 block element */ *zoom:1;

To not allow browsers that support CSS2.1 Inline-block to reset to inline, we do a hack for IE6, 7. Because the modern browser also began to support the Zoom property, here just hope IE6, 7 in effect, so or hack a bit more appropriate. This produces the familiar inline-block of the various browsers.

Summary: IE6, 7 is not unsupported Inline-block, but the block element needs to do some processing to achieve the inline-block effect.

2. What exactly is Inline-block
Said a lot, perhaps a lot of friends are not too clear what is Inline-block? The consortium is described in the CSS2.1 ' Display ' property as follows:

This value causes a element to generate a Inline-level block container. The inside of an inline-block are formatted as a block box, and the element itself are formatted as an atomic Inline-level b Ox.

The Inline-block element creates a row-level block container within which the content is formatted as a block element, and the element itself is formatted as an inline element.

To be straightforward, the inline-block element has a block element that can set a wide-height feature, while having a inline element that does not wrap by default. Of course, not only these features, such as inline-block elements can also set vertical-align properties. Nutshell:

The Inline-block element is a block container that is formatted as a inline element

Summary: Under the ie67 block element Display:inline-block will be invalidated, need to do hack processing through *display:inline;*zoom:1