Gecko 与 Webkit：内联块内的填充

Question

这是显示我的问题的小提琴： http://jsfiddle.net/7QaXL/1/

在 webkit 中基于浏览器的

的填充似乎将图像向上推，这不是我想要的。

所以我的问题是：

• 什么是正确的行为（根据规范）？
• 如何获得六个相同高度的块，内部元素带有填充，而不改变它们的对齐方式？

Answer 1

首先，我无法复制你的问题。其次，我会尝试使用这样的东西：

<ul>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 1</h6>
                <p>Long description 1</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 2</h6>
                <p>Long description 2</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 3</h6>
                <p>Long description 3</p>
            </figcaption>
        </figure>
    </li>
</ul>

这在语义上更有意义，因为现在细节与相关图像相关联，并且此标记将允许您更好地控制样式。 figure 和 figcaption 是 HTML5 元素，如果您需要任何进一步的帮助，请告诉我！

编辑：经过进一步探索这个问题，我发现您遇到的问题（据我所知）与 display: inline-block; 及其自然行为有关。如果您用 float: left; 替换该属性并给出无序列表 overflow: hide; （或使用clearfix 技术），问题应该得到解决。