Gecko vs. Webkit：内联块内的填充答案

【问题标题】：Gecko vs. Webkit : padding inside inline blocksGecko vs. Webkit：内联块内的填充
【发布时间】：2011-11-21 21:55:38
【问题描述】：

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

在基于 webkit 的浏览器中，<p>s 的填充似乎将图像向上推，这不是我想要的。

所以我的问题是：

什么是正确的行为（根据规范）？
如何在不改变对齐方式的情况下获得六个高度相同、内部元素带有内边距的块？

【问题讨论】：

我现在没有要测试的 webkit 浏览器，但是您是否尝试在图像上添加 vertical-align: bottom;？编辑：显示：table-cell 非常适合相同高度的块:) 虽然如果块太大它会拉伸（错误，我猜。应该用 min-width 测试以防万一）当 inline-block 表现得像 inline元素并创建第二行。

标签： css webkit gecko

【解决方案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: hidden;（或使用 clearfix 技术），则问题应该得到解决。

【讨论】：

Errrr，即使它在语义上更好也不能解决问题：尝试在figcaption 中添加填充。