Inline-block, do you understand me?

Once upon a while, Display:inline-block has been deep into the streets, everywhere "display:inline-block; *display:inline; *zoom:1; "Such a code. Today, modern browsers have fully supported this property value, and the code above is for compatibility with IE6, 7. So, do you really know inline-block? This article will take you in-depth analysis of this attribute value of the past life, let you better understand and use Inline-block. (This article agreed display:inline-block abbreviated to Inline-block)

Let's take a look at some questions:

• IE6, 7 really do not support display:inline-block?

• Why does the element after display:inline-block produce a horizontal void, is this really a bug?

• How to better solve the horizontal gap between the display:inline-block elements?

First, Inline-block past 1. Cognition

Maybe someone asked you why you wrote "display:inline-block; *display:inline; *zoom:1; "To be compatible with IE6, 7 o'clock, you will immediately answer: Because IE6, 7 does not support Display:inline-block Bai!" When the time comes, inertial thinking brings such a horrible concept to the developer. All things are dialectical, when you write these, have you ever doubted the public opinion is really reliable? You might think that it doesn't matter, and it works just fine. But if you do not understand the root of each property or attribute value, you will never be able to fully understand it, the same will only make you a little, stop. Then here is related to the so-called "css learning bottleneck" problem, this problem Zhang Xin Xu "talk about the bottleneck of CSS learning" a detailed elaboration, although some points I do not agree, but the central idea is still worth thinking about. Here are a few good questions to be listed here for you to observe:

1. What's the difference between line-height:150% and line-height:1.5?

2. Why does float cause the outer container to collapse highly? Is this a bug?

3. Vertical-align performance for IE7, IE8, IE9 under different performance? Where is the rendering mechanism?

Well, back to Inline-block's cognitive question, my point is:

IE has been supporting display:inline-block since 5.5, but the support is not so perfect .

In the MSDN Microsoft Developer Community, find the evidence that IE supports Inline-block from 5.5:

The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object ' s height or width.

It is clearly stated here that the support for Inline-block began in IE5.5.

Link: http://msdn.microsoft.com/zh-cn/library/ie/ms530751 (v=vs.85). aspx

So since IE5.5 began to support the Inline-block, why do we still write a piece of CSS? At the same time we know that IE6, 7 Display:inline-block can trigger Haslayout, the element that triggered the haslayout is a separate rectangular container, can be set wide and unaffected by external elements, similar to the modern browser Block formatting the concept of contexts (block-level formatting context).

Let's take a detailed test to see the behavior of the inline and block elements in IE6, respectively:

1) inline Element display:inline-block

The IE6 is as follows:

. Dib-inline,. Dib-block {
width:100px;
height:30px;
line-height:30px;
Text-align:center;
}
. dib-inline {
Display:inline-block;
}

The test shows that the inline element in IE6 only triggers haslayout its performance is similar to Inline-block, where the display:inline-block is set; or zoom:1; Other property values can trigger Haslayout, which shows the same.

View DEMO

2) block element Display:inline-block

The IE6 is as follows:

. 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 the IE6 cannot have an attribute that does not wrap the inline-block element even if it triggers haslayout. If you want the block element to support the attributes of the inline-block element, we can do this:

. dib-block {
Display:inline;
Zoom:1;
}

First, the block element is converted to an inline element, forcing it not to wrap, and then triggering the haslayout through zoom:1, so that it can be set to a wide height. Fix the following:

3) combined with modern browser

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

Display:inline-block; /* Modern browser +ie6, 7 inline elements */
*display:inline; /* IE6, 7 block element */
*zoom:1;

In order not to allow browsers that support CSS2.1 Inline-block to be reset to inline, we do a hack for IE6, 7. Because modern browsers also start to support the Zoom property, here just hope IE6, 7 in effect, so it is more appropriate to hack. This brings us to the familiar inline-block of each browser.

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

2. What exactly is Inline-block?

Said a lot, perhaps many friends still do not understand exactly what is Inline-block? The CSS2.1 is described in the ' Display ' property as follows:

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

Basically, the Inline-block element creates a row-level block container in which the inside (content) is formatted as a block element, and the element itself is formatted into an inline element.

The straightforward point is that the elements of the Inline-block have both a block element that can be set to a wide-height feature, and an inline element that does not break the default character. Of course not only these features, such as the Inline-block element can also set the Vertical-align property. Nutshell:

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

What do you think? Sounds good!

3. Where does the inline-block edge start?

It has been shown that IE 5.5 is supported by Inline-block at the beginning, so when did IE5.5 release it? The words of Netscape and IE War, IE5.5 that is how coquettish ... (OK, 10 pages are omitted here). From Wikipedia, IE5.5 Beta1 is released inDecember 1999 and the final version is July 2000 . So when does the Inline-block value appear in the standard?

In the CSS1 specification, the value of "display" only includes: Block | inline | List-item | None. The Inline-block property value was added in CSS2.1. A hint of continuing to lick the finger, with that bitter English level finally turned to the draft: Http://www.w3.org/TR/2002/WD-CSS21-20020802/visuren.html#display-prop, the date of the draft is August 2, 2002, Nani!!! Originally we tangled a half-day inline-block, IE5.5 at least two years in advance of the AH! Is it Microsoft's offer to the company, CSS 2.1 to join? (But I see the website has a vote on whether to increase inline-block) Okay, well, maybe one day when a developer of IE wrote "The Memoirs of IE", we could learn the inside of it. If you find an earlier CSS draft on Inline-block, you'll also be bothered to tell a hint. Well, if you don't believe it, call the official Microsoft Phone and ask 800-820-3800(not DHC!). ）。

Originally we have been discussing the Inline-block in IE 6, 7 and CSS2.1 (modern browser supported) Inline-block is not a thing at all, IE6, 7 inline-block more like the private property value of IE They are not comparable in nature. Simple, Absolute think IE6, 7 does not support Inline-block like Blinders, see front, but see the back, too one-sided. Admittedly, IE6, 7 of the Haslayout has brought us a lot of trouble, but we have to admit that Microsoft's IE in the Web page multi-language text mix of advanced, especially CJK text and Western mixed, beyond the other browser for at least 5 years.

Summarize:

• IE5.5 began to support Inline-block, but the inline-block it supported could not be equated with Inline-block in CSS2.1 because IE5.5 proposed CSS2.1 concept earlier than Inline-block and as So-called " private attribute Values " are used, so the effect of the two shows is not exactly the same.

• The block element support for Inline-block in IE 5.5, 6, 7, 8 (Q) is incomplete, and if you want to achieve a similar effect, you need to set it to Display:inline first, and then trigger Haslayout with Zoom:1.

• IE 5.5, 6, 7, 8 (Q) in the inline element to achieve the effect of Inline-block just set this property value directly or use zoom:1 and so on.

Second, Inline-block this life 1. Why does the element after display:inline-block produce a horizontal void, is this really a bug?

Such a magical attribute, why do we keep away from it? I'm afraid we have to start with a horizontal gap (GAP) between the inline-block elements.

Refer to DEMO

• In modern browsers, both inline and block elements produce horizontal voids after display:inline-block.
  
  
  

• IE6, 7,ie8 (Q) simulate the display:inline-block in two cases:
  
  
  IE6, 7,ie8 (Q): The inline element creates voids, and the block element does not create voids.

See how the inline element behaves by default? The original default there is a gap exists! Who are they? is the white space character!

In 9.1 white space, the following elements are defined as whitespace characters:

• ASCII Space (& #x0020;)

• ASCII tab (& #x0009;)

• ASCII page Break (& #x000C;)

• 0 width space (& #x200B;) "This is also used in a closed float."

9.3.2 controlling line breaks further elaborated:

A line break was defined to being a carriage return (& #x000D;), a line feed (& #x000A;), or a carriage return/line feed Pair. All line breaks constitute white space.

For more information about SGML's specification of line breaks, please consult the notes on line breaks in the appendix.

A break line is defined as a carriage return character (& #x000D;), a line feed (& #x000A;), or a combination of a carriage return and a line break. All the broken lines form a blank character.

For more information about wrapping lines in the SGML specification, see the comments in the appendix about wrapping lines.

Typically, for multiple contiguous whitespace characters (spaces, newline characters, carriage returns, and so on), the browser merges them into a single whitespace character. The CSS is controlled by the White-space property:

white-space: normal | Pre | nowrap | Pre-wrap | Pre-line

Default value : Normal

• Normal: The default processing mode.

• Pre: Displays preformatted text in equal-width font, does not combine white space between text, and does not wrap when text is out of bounds. can refer to the Pre object

• NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object.

• Pre-wrap: Displays preformatted text in equal-width font, does not combine whitespace between text, and wraps when text touches the boundary.

• Pre-line: Preserves text wrapping, does not preserve whitespace between text, and wraps when text touches the boundary.

Note: IE7 and earlier browsers do not support CSS2.1 new Pre-wrap | Pre-line.

So this is not a bug after Inline-block, but because Inline-block has intrinsic characteristics of inline elements. So why does the IE6, 7 block element not create voids? In fact, the former also mentioned the haslayout of IE, with independence, so the elements produced haslayout between the non-impact, which also shows that IE6, 7 Inline-block can not be equated with CSS2.1. If you have to say that there is a bug, IE6, 7 block element Inline-block after the non-void is the bug.

The test indicates that the void between the inline elements "disappears" after the line break is removed:

2. Remove the void created by the Inline-block

In order to make each browser consistent, better restore the visual design, many times we need to remove the gap created by Inline-block.

In the previous section, we already know that the fundamental causes of voids are:

in HTML , line breaks, spaces, tabs, and so on, which produce whitespace characters, which are all in the final analysis, are controlled by font-size, and the size of the font directly results in the size of the void between the elements of inline or inline-block, The gap between the inline-block elements is that it is always wrong to have a fixed size.

It's clear to see that when font-size:0 When the gap between the elements are 0, perhaps here you will feel very happy, the original master of the fundamental reasons so simple to take care of Ah!

However, the ideal is plump, the reality is the bone feeling.

Most browsers are supported font-size:0 Of Obviously, we're going to fight with IE 6, 7, the two doer.

font-size:0 The support situation

1) Chrome

Low version of Chrome browser in order not to let the text too small to read, the default is not support font-size:0 , fortunately we have-webkit-text-size-adjust this private property to control, when set to none support font size is 0. I can't remember exactly which version of Chrome started to support font-size:0 , anyway I use Chrome 19 is supported (have known friends, please tell a hint, preferably have official update instructions). However,-webkit-text-size-adjust:none will directly cause the page text to not be scaled, which is obviously unfriendly to the user . So-webkit-text-size-adjust:none; Be sure to use it with caution, ensuring that there are no large areas of text.

-webkit-text-size-adjust:none examples of usage scenarios see: http://vip.etao.com/

2) Safari

Safari 5 still does not support font-size:0, but I believe these browser vendors are aware of this problem, the latest Safari 6 on MAC platform is well supported font-size:0 The

3) Firefox,opera

After testing, Firefox12,opera 10, this time good performance, support font-size:0.

4) IE

• IE8 above support font-size:0;

• IE6, 7 inline element inline-block after setting font-size:0 There is always a gap of 1px.

Did you suddenly start to get headaches again? It doesn't matter, let's take out letter-spacing and word-spacing two great gods. Since the whitespace is also a character, the two great gods must be able to handle them.

• letter-spacing: Normal | length (retrieves or sets the interval between the text in the object)

• word-spacing: Normal | length(retrieves or sets the space inserted between the words in the object)

Normal: Default interval
Length: Specify the interval with the value of the lengths, and allow negative values.

What are you waiting for, let's try it quickly:

Refer to DEMO

• First step: Using font-size:0
  
  The tests found no gaps in Chrome, Firefox, ie8+, opera,inline or block elements;
  
  
  IE6, 7, 8 (Q), there is always a gap of about 1px after the inline element Inline-block.
  
  

• Step two: Handling Safari does not support font-size:0 The problem
  
  It has been pointed out that letter-spacing is a negative value, so how much is this negative value appropriate? The test concludes thatthe void generated by Inline-block is related to the inheritance of the parent element or to the set font-family, Font-size, typically, the 12px size of the Tahoma font, Inline-block The Void (GAP) generated between the elements is approximately 5px; for details of each font, refer to the Inline-block void--letter-spacing and font size/font relational data sheet.
  

• Step three: fix 1px gaps that always exist in IE6, 7
  Since letter-spacing is powerless, then try Word-spacing, directly set word-spacing:-1px. It is important to note that the simultaneous use of letter-spacing and word-spacing can cause conflicts, so we need to hack out letter-spacing in IE6, 7. The final code is as follows:

font-size:0;/* All browsers */
letter-spacing:-5px;/* Safari, etc. does not support browsers with a font size of 0 */
*letter-spacing:normal;
word-spacing:-1px;/* IE6, 7 */

• Fourth step: child elements reset back to normal
  All of the above actions are set on the parent element, then the child elements inherit these attributes, the font size is 0, and the child elements are invisible, which is not what we want. At the same time, the character and word spacing are also reset to the default value. "font-size:12px; Letter-spacing:normal; word-spacing:normal;"

• Finally: Inline-block better reuse
  Maybe you worry that every time I go to see the size of the font and the relationship between the gap? In fact, the global font is already specified in the body, and the appropriate letter-spacing negative values are set according to the global font. In this way, we can safely use the Inline-block, combined with the idea of oocss, can draw out two reusable classes, in the need to set the inline-block element of the parent element to define a ".dib-wrap", The element itself is defined as ".dib". One more thing to note here is that because Inline-block has the properties of inline elements, many times in the vertical direction we do not want elements to be rendered in a "vertical-align:baseline" way, so in the " The. dib-wrap" is reset to "vertical-align:top" .

3. The ultimate solution for removing inline-block voids (updated August 17, 2012)

. dib-wrap {
font-size:0;/* All browsers */
*word-spacing:-1px;/* IE6, 7 */
}
. Dib-wrap. dib{
font-size:12px;
Letter-spacing:normal;
Word-spacing:normal;
Vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* letter-spacing in Firefox causes horizontal displacement of elements that are out of normal flow */
. dib-wrap{
letter-spacing:-5px;/* Safari, etc. does not support browsers with a font size of 0, and N adjusts to the parent font */
}
}
. dib {
Display:inline-block;
*display:inline;
*zoom:1;
}

In fact, in the Yui 3 is also a comprehensive use of Inline-block as the basic layout, YUI 3 is the solution:

. yui3-g {
Letter-spacing: -0.31em; /* Webkit:collapse White-space between units */
*letter-spacing:normal; /* Reset IE < 8 */
Word-spacing: -0.43em; /* IE < 8 && Gecko:collapse white-space between units */
}

. yui3-u {
Display:inline-block;
Zoom:1; *display:inline; /* IE < 8:fake Inline-block */
Letter-spacing:normal;
Word-spacing:normal;
Vertical-align:top;
}

Obviously, this is purely using letter-spacing and word-spacing to control the gap between elements, the limitations are great, -0.31em and -0.43em just because YUI 3 global cssfonts.css settings are: "body {font:13 px/1.231 Arial,helvetica,clean,sans-serif; }」。

Of course, if you insist on the use of HTML written in a single line to achieve the purpose of removing inline-block voids, I can only say: all to sacrifice structure to be compatible with the performance of the behavior are bullying ! So it would be meaningless to explore this way of removing voids, not within the scope of this article and the author's consideration.

4. Outcome-some of the views presented in this paper are as follows:

• IE5.5 began to support Inline-block after the The concept of Inline-block was proposed earlier than CSS2.1 and used as the so-called " private attribute value " . However, the inline-block that it supports cannot be equated with Inline-block in CSS2.1, andtheblock element in IE 5.5, 6, 7, 8 (Q) does not support Inline-block Intact, so the effect of the two shows is not exactly the same.

• the fundamental reasons for producing inline-block voids are: in HTML , line breaks, spaces, tabs, and so on are merged into white space, the font size is not 0, the space character naturally occupies a certain width, resulting in the gap between elements.

• Use caution with -webkit-text-size-adjust:none, which will cause the page to not scale to change the font size.

Iii. the future of Inline-block

Today, Safari 6 under the MAC platform already supports font-size:0 , believe soon Windows platform Safari if the release of 5.X updates, will also support the font for font-size:0 The When IE6 and 7 perish, the world is truly wonderful! Finally say:Inline-block and float are not directly comparable, please do not discuss inline-block and float which is a better topic. Inline-block from IE5.5 all the way, the existence is reasonable, after the time in summing up the use of inline-block and float the difference between the scene.

Without changing the CSS positioning mechanism, inline-block should be preferred rather than "kinky tricks". A piece of a limerick:

Internet things like smoke
CSS in the Red dust
Inline-block know how much
You're on the head.
Inline-block on the other end.
With and without
It's right there.
No sorrow, no joy.

Ps:

1. In order to better typesetting, this article uses the traditional Chinese quotation mark instead of the Simplified Chinese small tadpole quotation mark;

2. Chinese and English mixed in the time of the English and a blank;

3. GIF animations will also be used to illustrate the future articles when necessary.

Test environment

Operating system version:	Windows 7 Enterprise Edition 6.1 (build 7600)
Browser version:	IE6 IE9 Firefox 14.0.1 Chrome 19.0.1084.46 Safari 5.1.7 (7534.57.2) Opera 12.50

Inline-block, do you understand me?