Mozilla Webdev » Blog Archive » Cross-Browser Inline-Block

Mozilla Webdev » Blog Archive » Cross-Browser Inline-Block

What’s going on here is the baseline of each <li> is being aligned with the baseline of the parent <ul>. Putting it as simply as possible, the default vertical-align value on inline or inline-block element is baseline, which means the element’s baseline will be aligned with its parent’s baseline.

Technically, what hasLayout means is an element with hasLayout set to true is responsible for rendering itself and its children (combine that with a min-height and width, and you get something very similar to display:block). It’s kinda like magical fairy dust you can sprinkle on rendering issues and make them disappear.

When we add zoom:1 and *display:inline (star hack to target IE6 & 7) to the

s, we make IE 7 display them as if they were inline-block:

CSS2 - The display declaration - ie 要模擬成 display: inline-block, 必須同時加上 zoom:1 以及 display:inline

In IE 6 and 7 inline-block works only on elements that have a natural display: inline.

<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>

Stack Positioning - MDC