Display:inline-block's understanding

The Display:inline-block display value is a block box model inside a inline-block element, which itself forms an inline substituted element. That is, the elements of display inline-block can define height widths as block elements, and can be arranged in one line with inline elements such as text.

Renders an object as an inline object, but the contents of the object are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces.

But for this property not all browsers are recognized, the supported browsers are: Opera, Safari.

Unfortunately, IE and Firefox do not support this property (Display:inline-block is supported in the FIREFOX3 version). However, Firefox has a private property-moz-inline-box and Inline-block-shaped, why is "shape" rather than "spirit"? This is because the use of-moz-inline-box will bring a lot of unexpected sequelae, such as the use of this property, Text-align sometimes have problems, but also have to use the private properties of Firefox-moz-box-align to solve, it is best not used Firefox private Property-moz-inline-box.

Maybe a friend of the above said IE also does not support the Display:inline-block attribute, expressed doubts or objections. "I've been working with Display:inline-block for an inline element such as a or span in IE," says the editor.

In fact, in IE, the use of inline elements Display:inline-block,ie is not known, but the use of display:inline-block in IE will trigger layout, so that the inline elements have display: Inline-block attribute of the table of the disease. From the above analysis, it is not difficult to understand why IE, the block element set Display:inline-block property can not achieve inline-block effect. At this point the block element is simply triggered by the display:inline-block layout, and it is the row layouts, so after the trigger, the block element is still the row layout, but not as the block elements in Opera as an inline object.

Extension One question: How does the IE block element implement the Display:inline-block effect?

There are two ways of doing this:

1, first use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block elements presented as inline objects (two display to be placed in two CSS declarations to 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):

div {display:inline-block;...}
div {display:inline;}

2. Set the block element directly to inline object presentation (set property display:inline), then trigger the layout of the block element (e.g. zoom:1, etc.). The code is as follows:

div {display:inline; zoom:1;...}

 前端观察跨浏览器的inline-block,http://www.qianduan.net/cross-browser-inline-block/

 不过随着微软在web世界卷土重来,windows内置浏览器Edge对标准的支持,这些问题会慢慢显得不那么严重.但是为了抓住一小部分老IE用户,还是值得去学习的.

Display:inline-block's understanding