Inline-block past and present (reproduced)

Inline-block past and present

Trace | Time:

 

Once upon a time, the code "display: inline-block; * display: inline; * ZOOM: 1;" was everywhere. Modern browsers now fully support this attribute value. The above code is only for compatibility with IE6 and 7. So do you really understand inline-block? This article will take you through in-depth analysis of the attribute value's past and present, so that you can better understand and use inline-block. (Display: inline-block is abbreviated as inline-block)

At the beginning, let's look at several questions:

• Does IE6 and 7 really not support display: inline-block?
• Why does the element after display: inline-block generate a horizontal gap? Is this a bug?
• How can we better solve the horizontal gap between display: inline-block elements?

I. inline-block past lives 1. Cognition

When someone asks why you want to write "display: inline-block; * display: inline; * ZOOM: 1;" to be compatible with IE6 and 7, you will immediately reply: because IE6 and 7 do not support display: inline-block! I don't know when to start. Inertial thinking has brought such a terrible concept to developers. All things are dialectical. When you write down these things, have you ever doubted the reliability of the public opinion? Maybe you think it doesn't matter, and it's good to achieve the effect. However, if you cannot understand the root of each attribute or attribute value, you will never be able to fully understand it. The cloud will only let you get started and stop. The so-called "CSS learning bottleneck" is involved here. This issue is described in detail in Zhang xinxu's article "talking about the bottleneck in CSS learning". Although I do not quite agree with some ideas, however, the central idea is worth thinking about. There are several good questions in this article, which are also listed here for your observation:

1. What is the difference between line-Height: 150% and line-Height: 1.5?
2. Why does float collapse the height of an external container? Is this a bug? (My answer is "floating we cleared together in those years")
3. Why does vertical-align behave differently in IE7, IE8, and ie9? What is the rendering mechanism?

Well, back to the question of inline-block cognition, my point is:

IE has supported display: inline-block since 5.5, but it is not so well supported..

In the Microsoft developer community of msdn, I found evidence that IE has supported inline-block since 5.5:

TheInline-blockValue 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 pointed out that inline-block is supported from ie5.5.

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

So since ie5.5 has already supported inline-block, why do we need to write so much CSS? At the same time, we know that display: inline-block in IE6 and 7 can trigger haslayout. The elements that trigger haslayout are represented by an independent rectangular container, you can set the width and height without the influence of external elements, similar to the concept of block formatting contexts in modern browsers.

Next we will perform a detailed test to see the performance of inline and block elements in IE6:

1) inline element display: inline-block

IE6 is as follows:

. Dib-inline,. Dib-block {
Width: 100px;
Height: 30px;
Line-Height: 30px;
Text-align: center;
}
. Dib-inline {
Display: inline-block;
}

Test results show that the inline element in IE6 is similar to the inline-block as long as haslayout is triggered. Setting the display: inline-block, Zoom: 1, and other attribute values can trigger haslayout, the results are the same.

View demo (update)

2) block element display: inline-block

IE6 is as follows:

. Dib-inline,. Dib-block {
Width: 100px;
Height: 30px;
Line-Height: 30px;
Text-align: center;
}
. Dib-block {
Display: inline-block;
}

Tests show that even if haslayout is triggered, block elements in IE6 cannot have the inline-block feature without line breaks. To support the features of the inline-block element, we can do this:

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

First, let the block element be converted to the inline element, and force it not to wrap; then, use ZOOM: 1 to trigger haslayout so that it can be set to width and height. The fix is as follows:

3) combined with modern browsers

In summary, modern browsers support the display: inline-block, IE6, and 7 inline elements to achieve the same effect. For IE6 and 7 block elements, you need to set display: inline; ZOOM: 1; they are combined as follows:

Display: inline-block;/* modern browser + IE6, 7 inline elements */
* Display: inline;/* IE6, 7 block elements */
* ZOOM: 1;

To prevent browsers that support css2.1 inline-block from being reset to inline, we provide an hack for IE6 and 7. Modern browsers also began to support the zoom attribute. Here, we only want the zoom attribute to take effect in IE6 and 7, so it is better to use hack. At this point, we have developed an inline-block method that is familiar with various browsers.

Conclusion: IE6 and 7 do not support inline-block, but the block element must be processed to achieve the inline-block effect.

2. What is inline-block?

I 've said a lot. Maybe many of my friends are not clear about what is inline-block? W3C describes the 'display' property in css2.1 as follows:

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

The element after inline-block creates a row-level block container, which is formatted into a block element, at the same time, the element itself is formatted into a row element.

To put it bluntly, the inline-block element not only has the feature that the block element can be set to a high width, but also has the feature that the inline element does not wrap by default. Of course, it is not just these features. For example, the inline-block element can also set the vertical-align attribute. In short:

The inline-block element is a block container formatted as an element in the row)

How is it? Sounds good!

3. Where does inline-block link start?

It has been proved that IE 5.5 supports inline-block from the very beginning. When will ie5.5 be released? That's how cool ie5.5 was when Netscape and Internet Explorer fought ...... (Well, 10 pages are skipped here ). According to Wikipedia, the release time of ie5.5 beta1 is:December 1999The final version isJuly 2000. So when will the value of inline-block appear in W3C standards?

In the css1 specification, the "display" value only includes: block | inline | list-item | none. In css2.1, the inline-block attribute value is added. A trace of continued licking fingers, with the hard-pressed English level finally turned to the draft: http://www.w3.org/TR/2002/WD-CSS21-20020802/visuren.html#display-prop, the draft of the date is August 2, 2002, Nana !!! It turns out that we have struggled with inline-block for half a day. ie5.5 was proposed at least two years in advance! Is CSS 2.1 added only after Microsoft proposed to W3C? (However, I see a vote on whether to add inline-block on the W3C official website) well, this problem may be solved one day when a developer of IE writes "Memoirs of IE. If you find the draft CSS about inline-block earlier, you may need to give me a try. Well, if you still don't believe it, call the official Microsoft Phone to ask.800-820-3800(Not DHC !).

The inline-block we have been discussing in IE 6, 7, and css2.1 (supported by modern browsers) is not a thing at all, inline-blocks in IE6 and 7 are more like IE'sPrivate property valueThey are not comparable. In simple and absolute terms, IE6 and 7 do not support inline-blocks. They are too one-sided to see the front, but not the back. It is true that haslayout of IE6 and 7 has brought us a lot of trouble, but I have to admit that Microsoft's IE is advanced in multi-language text mixing on webpages, especially the mixing of CJK text and Spanish text, surpass other browsers for at least 5 years.

Summary:

• Ie5.5 and later began to support inline-block, but the inline-block supported by it cannot be equivalent to the inline-block in css2.1, because ie5.5 proposed the concept of inline-block earlier than css2.1 and used it as the so-called「Private property value」Therefore, the effects of the two are different.
• The block elements in IE 5.5, 6, 7, and 8 (q) do not fully support the inline-block. To achieve similar effects, you must first set it to display: inline, then use ZOOM: 1And so onTrigger haslayout.
• In IE 5.5, 6, 7, 8 (Q), to achieve the inline-block effect, you only need to directly set this attribute value or use ZOOM: 1.

For more information about the Display Properties supported by browsers, see: different browsers have different levels of support for the 'display' feature value.

Ii. inline-block 1. Why does the element after display: inline-block generate a horizontal gap? Is this a bug?

Why have you been avoiding such a magical property? I'm afraid this should start with the horizontal gap (GAP) between inline-block elements.

Refer to demo

• In modern browsers, both inline and block elements display: inline-block generate horizontal gaps;
  
• IE6, 7, IE8 (QSimulate the display: inline-block:
  
  IE6, 7, IE8 (Q): The Inline element produces gaps, and the block element does not.

What is the default performance of inline elements? By default, there is a gap! Who are they? Is a white space )!

The W3C 9.1 white space specifies that the following elements are white spaces ):

• ASCII space ()
• ASCII tab ()
• ASCII break (& # x000c ;)
• Zero-width space (?) 「 This is also used in closed floating 」

9.3.2 controlling line breaks:

A line break is defined to be a carriage return (), a line feed (), 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 line break is defined as a carriage return (), line feed (), or a combination of carriage return and line feed. All the lines constitute a blank character.

For more information about the rows in the SGML specification, see the notes about the rows in the appendix.

Generally, the browser merges multiple consecutive blank characters (such as spaces, line breaks, and carriage returns) into a blank character. CSS is controlled by the white-space attribute:

White-space: Normal | pre | nowrap | pre-wrap | pre-line

Default Value: Normal

• Normal: the default processing method.
• Pre: pre-formatted text is displayed in an equal-width font. The blank distance between texts is not merged. If the text exceeds the boundary, no line break is entered. View Pre objects
• Nowrap: forces all text to be displayed in the same row until the text ends or the BR object is encountered.
• Pre-wrap: pre-formatted text is displayed in an equal-width font. The blank distance between texts is not merged. A line break occurs when the text encounters a boundary.
• Pre-line: Keep text line breaks and do not keep the blank distance between texts. A line break occurs when a text encounters a boundary.

Note: IE7 and earlier Browsers Do not support pre-wrap | pre-line added by css2.1.

Therefore, this is not a bug generated after the inline-block, but because the inline-block has the inherent characteristics of the inline element. So why are there no gaps in IE6 and 7 block elements? In fact, we mentioned earlier that haslayout of IE is independent, so the elements that generate haslayout do not affect each other, this again indicates that the inline-block in IE6 and 7 cannot be the same as the inline-block in css2.1. If it is necessary to say that there is a bug, it is the bug that IE6 and 7 block elements do not generate gaps after inline-block.

The test indicates that the gap between inline elements disappears after the linefeed is deleted:

2. Remove the gaps generated by inline-block.

In order to make the performance of various browsers consistent and better restore the visual design, we often need to remove the gaps generated by inline-block.

In the previous section, we have known the fundamental reasons for the gap:

In HTMLLinefeeds, space characters, tabs, and so on generate blank characters. These are all characters in the final analysis, and their sizes are controlled by font-size, the font size directly leads to the gap size between the inline and inline-block elements. It is wrong to regard the gap between inline-block elements as always a fixed size.

Use GIF animation to show the corresponding relationship:

It is clear that when font-size: 0, the gap between elements is 0, and you may feel very pleased here, the original root cause is so simple!

However,The ideal is full, and the reality is skinny.

Most browsers support font-size: 0. Obviously, we are going to fight with IE 6 and 7.

Font-size: 0

1) Chrome

In earlier versions of chrome, font-size: 0 is not supported by default to prevent the text from being too small for reading. Fortunately, we have the Private Attribute-WebKit-text-size-adjust to control it, if set to none, the font size is 0. I do not know from which version chrome supports font-size: 0. I use Chrome 19 to support it. (If you know, please let me know, it is best to have an official update description ). However,-WebKit-text-size-adjust: none; the page text cannot be scaled directly, which is obviously unfriendly to users.. -WebKit-text-size-adjust: none; Be sure to use it with caution to ensure that there is no large area of text in use.

-WebKit-text-size-adjust: Use Cases of none 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 the Mac platform already supports font-size: 0.

3) Firefox and opera

According to tests, firefox12 and opera 10 have performed well. They support font-size: 0.

4) IE

• IE8 and above support font-size: 0;
• After the inline element inline-block of IE6 and 7 is set to font-size: 0, there is always a gap of 1px.

Is it a headache again? It doesn't matter. Let's get it out.Letter-spacingAndWord-spacingTwo great gods. Since the blank spaces are also characters, the two gods can certainly solve them.

• Letter-Spacing:Normal|Length(Retrieving or setting the interval between texts in an object)
• Word-Spacing:Normal|Length(Retrieve or set an empty gap between words in an object)

Normal: Default Interval
Length: Specify the interval with the length value, which can be a negative value.

What are you waiting for? Let's try it now:

Refer to demo

• Step 1: The use of font-size: 0 has been tested and found that there is no gap between Chrome, Firefox, IE8 +, opera, inline, or block elements;
  Safari 5.1.7 because it does not support font-size: 0, there is still a gap;
  
  
  IE6, 7, 8 (Q), inline element inline-block, there is always a gap between 1 px.
• Step 2: handle the problem that safari does not support font-size: 0. It has been pointed out that letter-spacing supports negative values. How many values are suitable for this negative value? The test results show that:The gaps generated by inline-block are related to the parent-level element inheritance or the font-family and font-size. Generally, the tahoma font is 12 Px in size, the gap (GAP) between elements after inline-block is about 5px;
  For more information about each font, see inline-block gap-letter-spacing and font size/font relationship data table..In Firefox, when the absolute value of the negative letter-spacing value is greater than the gap size, the entire position of the element is shifted to the right;
• When the absolute value of the letter-spacing negative value in Safari is greater than the gap size, the content overlaps.
• Step 3: fix the 1px gap that always exists in IE6 and 7
  Since letter-spacing is powerless, try word-spacing and directly set word-Spacing:-1px. It should be noted that the simultaneous use of letter-spacing and word-spacing may lead to conflicts, so we need to hack letter-spacing in IE6 and 7. The final code is as follows:

Font-size: 0;/* all browsers */
Letter-Spacing:-5px;/* safari and other browsers with a font size of 0 */
* Letter-Spacing: normal;
Word-Spacing:-1px;/* IE6, 7 */

• Step 4: reset the child element back to normal
  All the above operations are set on the parent element, so the child element will inherit these attributes. The font size is 0, and the child element will be invisible. This is not what we want. At the same time, we also need to reset the Character spacing to the default value. 「 Font-size: 12px; letter-Spacing: normal; Word-Spacing: normal ;」
• Finally, inline-block can be used more efficiently.
  Maybe you will worry about the relationship between the font size and the gap size every time I look at it? Normally, the global font is already specified in the body. You can set a negative letter-spacing value based on the global font. In this way, we can safely and boldly use inline-block. Combined with oocss, we can extract Two reusable classes, define「. Dib-wrap 」The element is defined「. Dib 」. Note that because inline-block has the characteristics of the inline element, we do not want the element「 Vertical-align: Baseline 」In「. Dib-wrap 」Reset「 Vertical-align: Top 」You can.

3. The ultimate solution for removing inline-block gaps (updated in 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 may cause horizontal element displacement out of normal streams */
. Dib-wrap {
Letter-Spacing:-5px;/* safari and other browsers with 0 font sizes are not supported. N is adjusted based on the parent font */
}
}
. Dib {
Display: inline-block;
* Display: inline;
* ZOOM: 1;
}

In fact, Yui 3 also comprehensively uses inline-block as the basic layout. Yui 3 solves the problem as follows:

. 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, letter-spacing and word-spacing are used to control the gaps between elements, which is very limited.-0.31em and-0.43em are only set in Yui 3 Global cssfonts.css as follows: 「 body {Font: 13px/1.231 Arial, Helvetica, clean, sans-serif ;}」.

Of course, if you insist on writing HTML in one line to remove the inline-block gap, I can only say:EverythingSacrificeStructure to be compatible with the performance of behavior is rogue! Therefore, it is meaningless to explore this method to remove gaps, which is beyond the scope of this article and the author's consideration.

4. Conclusion: some ideas in this article are as follows:

• Ie5.5 and later start to support inline-block,The concept of inline-block was proposed earlier than css2.1 and used as the so-called「Private property value」.However, the supported inline-block cannot be the same as the inline-block in css2.1.,In IE 5.5, 6, 7, and 8 (Q), the inline-block support is incomplete,Therefore, the effects of the two are different.
  
• The fundamental cause of inline-block gaps is that linefeeds, space characters, and tabs in HTML are merged into blank characters. When the font size is not 0, the blank space naturally occupies a certain width, therefore, there is a gap between elements.
  
• Use-WebKit-text-size-adjust: none with caution. This will prevent the page from being scaled to change the font size.

Iii. Future of inline-block

Now, Safari 6 on Mac has supported font-size: 0. I believe that if Safari on Windows is updated 5.x soon, it will also support font-size: 0. After IE6 and 7 are extinct, the world will be wonderful! Last:Inline-block and float cannot be compared directly. Please do not discuss any better topics about inline-block and float.It is reasonable that inline-block comes along the way from ie5.5. I will summarize the differences between inline-block and float in the future.

Without changing the CSS positioning mechanism, inline-block should be the first choice, rather than the existence of "odd sex techniques. A write-down poem:

Online events like smoke
CSS
Inline-block
You are here
Inline-block at the end
Use and not use
It's there.
No sorrow

PS:

1. For better formatting, This article uses the traditional Chinese quotation marks "" instead of the simplified Chinese quotation marks;
2. Add a space at the beginning and end of the English when the Chinese and English are mixed;
3. In the future, when necessary, GIF animation will also be used for instructions.

Test Environment

Operating system version:	Windows 7 Enterprise 6.1 (internal version 7600)
Browser version:	IE6 Ie9 Firefox 14.0.1 Chrome 19.0.20.4.46 Safari 5.1.7 (7534.57.2) Opera 12.50
Last Update Time:	2012-8-22

Trace
In Hangzhou

Address: http://ued.taobao.org/blog/2012/08/inline-block/

Inline-block past and present (reproduced)