CSS display inline block compatibility problem notation

Today in the writing layout of a bug found, if not to achieve the desired effect, can not be arranged in two rows, the original IE6, IE7 under the Display:inline-block does not support, so need to use CSS hack to be compatible:

IE6, IE7 does not recognize Inline-block but can trigger block elements.

Inline-block is supported by other major browsers.

Ways to resolve IE6, IE7 compatibility:

1, first set the Inline-block trigger block element, with the layout characteristics, and then set Display:inline to make the block elements render inline elements, the layout of the characteristics will not disappear.

2, directly set Display:inline, using Zoom:1 trigger layout.

All browsers are compatible with the following methods:

CSS Code copy content to clipboard

1. display:inline-block; /* Modern browser +ie6, 7 inline elements */

2. *display:inline; /* IE6, 7 block element */

3. *zoom:1;

The following is a brief introduction:

1. Example Demonstration Effect



2, Display:inline-block role?

With the Display:inline-block attribute, you can make inline elements or block elements into inline block elements, simply by saying that you can define your own width and height without the float property, while making it easy to center the element in the parent element!

3. When will the Display:inline-block be used?

In the site layout, many times, the child element uses inline elements such as span or block element Li tag and the number of labels is variable, and we want to make this piece no matter how many (the overall width of the child element variable), always can be centered display! This time Display:inline-block will come in handy!

4, IE6/7 support Display:inline-block this attribute?

Define the Display:inline-block property on the inline element and find that the display in IE6 and IE7 is consistent with the other browsers, but the fact is that IE7 and the lower version of IE do not support display:inline-block this property!
The correct explanation is that "using the Inline-block property will trigger layout in IE, so the width and height set on the element can be effective, so there is a consistent display with other browsers", and cannot say that IE6/7 supports display: inline-block!

5, the line element only needs to define Display:inline-block, the display effect each browser is consistent, IE7 the next block element how realizes Display:inline-block effect??

Under IE, display:inline-block just triggers the layout of the element. For example, setting the Display:inline-block to P can only guarantee that the P has the feature of the Block element (which can be set to width, height, etc.), but it will still produce a line break. The next step is to set the display:inline so that it does not generate a newline. Display:inline-block;*display:inline is written in the same style, the Inline-block property does not trigger the layout of the element, so we also add *zoom:1 to trigger the layout!

6, IE7 block elements how to be compatible with Display:inline-block notation?

There are 2 ways to actually work:

Method 1: Set the block element directly to the inline object presentation (set property display:inline), and then trigger the layout of the block element (for example, zoom:1, etc.). The following code is compatible with each browser: p {display:inline-block;*display:inline; *zoom:1; ...}
Method 2: First use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block elements are presented as inline objects (two display to be placed in two CSS style declarations have effect, this is a classic IE bug, If Display:inline-block is defined first, then the display is set back to inline or block,layout does not disappear). The code is as follows (...). Other attribute content omitted): p {display:inline-block; ...} p {*display:inline;}

7, Display:inline-block elements will produce extra blank how to solve?

Display:inline-block elements will produce extra whitespace, which is inline-block itself!
Strictly speaking is not a bug, the use of font-size settings can be resolved to solve the display:inline-block elements of the extra gap between the article: http://www.jb51.net/css/76707.html