Cross-browser inline-block

Ah, inline-block, it's hard to figure out and the fascinating statement promises a lot, but it actually provides little. Many times I got a PSD file like this:

Then I cried.

Generally, this type of layout is a dish. Fixed width, fixed height, float left to solve. However, the content in this design is variable, which means that if some content in these blocks is more than others, the layout will be damaged.

Because the first display item is higher than other items, the fifth project is relative to the first one, rather than under it. Basically, we want the layout of an Elastic table, but the appropriate semantic tag.

We start this simple page with an unordered list and set display to inline-block:

<ul><li><h4>This is awesome</h4><img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" /></li>...</ul>

<!-- li {     width: 200px;     min-height: 250px;     border: 1px solid #000;     display: inline-block;     margin: 5px; } -->

The results look okay in Firefox 3, Safari 3, and opera:

Obviously, there are some errors in the vertical arrangement. Well, it's not a mistake. This is the correct performance, but it's not what we want.

This is because the baseline of each <li> element is aligned with the baseline of its parent <ul>. What is a baseline? Figure 1:

The baseline is the black line that spans the above text. It should be as simple as possible. The default vertical-align value of the inline or inline-block element is the baseline. That is to say, the element baseline must be aligned with the baseline of her parent element. The following is an example:

As you can see, each baseline is aligned with the baseline of the text 'this is the baseline. Although the text is not within <li>, the parent element <ul> of the text node specifies the baseline of the parent element.

In short, the correction method is very simple: vertical-align: top, so that you can get a grid that looks good:

However, Firefox 2, IE 6, and 7 still do not work:

Start with Firefox 2.

Firefox 2 does not support inline-block, but it supports the display attribute '-moz-inline-stack' unique to Mozilla, which is similar to inline-block. Before adding it to display: inline-block, FF2 ignores inline-block and retains-moz-inline-stack because it does not know inline-block. Browsers that support inline-block will use inline-block to ignore the previous display attribute.

li {width: 200px;min-height: 250px;border: 1px solid #000;display: -moz-inline-stack;display: inline-block;vertical-align: top;margin: 5px;}

Unfortunately, there is a small bug:

Frankly speaking, I don't know what caused this bug. However, there is a quick correction method. Include all <li> items with <div>.

<li><div><h4>This is awesome</h4><img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" /></div></li>

It seems that the content in <li> is 'reset 'and displayed correctly.

2009.04.29 updated: After multi-party verification, the nested div method can be interpreted as: FF for all elements whose attributes are stack (of course-moz-inline-stack, its first child element willInherit the width and height of the elementBut the child element of the child element will no longer inherit its width and height. However, in fact, FF2 can be ignored to some extent ...... -- By shenfei

Now, go to IE 7. IE 7 does not support inline-block, but we can fool it to make <li> seem like inline-block. How can this problem be solved? HasLayout, a magical attribute that brings fun to IE. You cannot use
HasLayout: true; Set hasLayout explicitly, or use other similar simple methods, but you can use other statements similar to zoom: 1 to stimulate it.

Technically, hasLayout means that an element with hasLayout set to true is responsible for rendering itself and its child elements (by associating it with min-height and width, we can get and display: block is very similar ). This is a bit like a magic genie powder. If you spill it on the rendering problem, the problem disappears.

After <li> is added with zoom: 1 and * display: inline (the asterisks hack for IE6 and IE7), they can be displayed in IE7 like inline-block:

li {width: 200px;min-height: 250px;border: 1px solid #000;display: -moz-inline-stack;display: inline-block;vertical-align: top;margin: 5px;zoom: 1;*display: inline;}

Wow! Almost, IE 6 is left:

IE6 does not support min-height, but we can use it instead of the height attribute because of its incorrect processing. Set _ height (IE6 underline hack) to 250px so that all <li>
The element height is 250px, and if their content is greater than 250px, they will expand to adapt. All other browsers will ignore _ height.

So far, it has been effective for all browsers. This is the final CSS and HTML:

<!-- li {     width: 200px;     min-height: 250px;     border: 1px solid #000;     display: -moz-inline-stack;     display: inline-block;     vertical-align: top;     margin: 5px;     zoom: 1;     *display: inline;     _height: 250px; } -->

<li><div><h4>This is awesome</h4><img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" /></div></li>