CSS in-depth research: decryption of the terror story of Display (1)-inline-block

As one of the most terrible attributes, display is definitely not a real deception for a 3-year-old. Next, let's take a look at the terror of this product.

Display value:

None: hides an object.(Note: Unlike visibility: hidden, this product disappears completely without retaining physical space .)

Inline: Specifies the object as an inline element.

Block: Specifies the object as a block element.

List-item: Specifies an object as a list element.

Inline-block: Specifies the object as an inline block element.

Inline-table: Specifies the object as an inline table.

Table: the specified object is equivalent to a table element. <Table>

Table-caption: the specified object is equivalent to the table title <caption>

Table-cell: the specified object is equivalent to a cell <TD>(Well, all sorts of equivalence. I am a lazy person. I will omit all kinds of unnecessary words below. You can just use the table-based check mark)

Table-row: <tr>

Table-row-group: <tbody>

Table-column: <Col>

Table-column-group: <colgroup>

Table-header-group: <thead>

Table-footer-group: <tfoot>

Campact: Specifies the object as a block element or an inline element based on the content.

Run-in: specify an object as a block object or an inline object based on content.

Ruby: Specifies an object as a table footer group.

Ruby-base: Specifies the object as a table footer group.

Ruby-text: Specifies the object as a table footer group.

Ruby-base-group: Specifies the object as the table footer group.

Ruby-text-group: Specifies the object as the table footer group.

Box (Flex): Specifies the object as the elastic box model.

Inline-box: Specifies the object as an inline block-level elastic box model.

How about it? My head is dizzy. Such a bunch of properties. My milk is sour with so many characters. But don't worry. Let's make a bold prediction. When css4 comes, will it make some of its attributes fart? I predict that some values in the table will be choppy, if you ask me why, okay, I admit that I only think they are ugly, so that's why I said that. Then it is said that the ruby-related property values are not supported by the browser, Nima. In this case, we will gradually see that a large part of the devil's display is fake. After layers of clothes, we gradually see several common attributes:

None, inline, block, and inline-block. Why is it common? This is because the compatibility of these guys is amazing. At this time, inline-block smiled. I decided to use the eyes Sherlock Holmes gave me to pull the goods out and let everyone look around.

Let's explore the mysteries of inline-block.

I don't know when, display: inline-block; has been deep into the web, [F12] Find this product, gently open Sina light blog(Okay, this is a free advertisement)

Wow, there are 138 million. That's enough. Since this product is so embarrassing, let's look at it. Next let's take a lookCode

 
{Display:Inline-block;* Display:Inline;* Zoom:1;}
 

A piece of Common Code, here are a few questions:

1. The elements after inline-block will be blank. What is the problem?

2. Does IE6 and 7 really not support inline-block?

To answer these two questions, you must first find out what inline-block is. Let's look up the document.

Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, Space permitting.

The above text is from webplatform, a young authoritative website. If not

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.

This text is from W3C. Translate: the inline-block element turns itself into a special inline element, which shows the characteristics of Inline for Adjacent Elements and allows spaces. For internal elements, it shows the characteristics of block elements. You can set the height and width.

Well, since adjacent elements are characterized by inline and spaces are allowed, spaces are naturally generated during line breaks. Therefore, this is normal. This is an inherent feature of the inline-block element, not a so-called bug. Then the first question is answered. However, most of the time, we do not want to see this blank. As a result, many restoration methods have been circulated on the Internet. The following is a simple example:

{Font-size:0;Letter-spacing:-6px;}
 

In the inline-block outer layer, set the following formula to clear the Gap:

1. Set the font size of the line break or Tab character or space character to 0, thus losing the width.

2. Letter-spacing is a bug that fixes the 1px gap after some elements inline-block in IE6 and 7 and a browser that does not support font-size: 0.(Different fonts have different widths. For details, click inline-block gap-letter-spacing and font size/font relationship data table.)

Let's see how this fix works:

We can find that in IE6 and 7, the inline element and the inline-block element always have a 1px gap, elements in Safari overlap, and all browser elements are not aligned. It seems that I want to make a good decision. Let's take a look at the code written by a great God:

 . 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) { /*  In Firefox, letter-spacing will cause horizontal displacement of elements that are separated from 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 ;}

Etc. Wait for the lamp and wait for the lamp ^ _ ^:

All browsers are normal. Wait, and I suddenly found a problem:

Cool, don't think it's a careful overlap, so I won't be able to see it. In the past, I used to fight against IE6, the devil. This time, I was switching to the devil. Think twice first: What is the gap between blank spaces?

Oh, it's a [linefeed] or [Tab] or a [space character]. Let me go and merge the HTML code into a line for debugging. Wow! After merging, it is normal. However, this is certainly not the result that children's shoes hope to see:EverythingSacrificeStructure to be compatible with the performance of behavior is rogue! What should we do? If the children's shoes are compatible with Safari and do not want to modify letter-spacing according to different situations, play a rogue game, Shift + TAB, remove [Tab], no matter how big the letter-spacing settings are, there is no problem. That is, let the Code look like this:

With less indentation, there is no harm and elegance.

I have to answer the first question. Next, let's take a look at the second question: Does IE6 and 7 Support inline-block? Maybe this question should be asked in another way. Does IE6 and 7 Support the inline-block mentioned in css2.1?

The answer is no, but similar. This is achieved by triggering the haslayout of the browser. By the way:

HaslayoutIs an internal component of the Windows Internet Explorer rendering engine. In internetexplorer, an element either calculates the size and organization of its own content, or relies on its parent element to calculate the size and organization content. To adjust these two concepts, the rendering engine uses the haslayout attribute. The attribute value can be true or false. When the haslayout attribute value of an element is true, the element calculates the size and organization of its own content without relying on the parent element. The haslayout triggered by display: inline-block is irreversible, so * display: inline does not make haslayout = false.

 

At the end of all evil, this time the last omnipotent, limited ability, brother, I can only help you here, if it is helpful to you, click [recommended] or [Top].