Question

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

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

所以我的问题是：

什么是正确的行为（根据规格）？
如何获得相同高度的六个块，内部元素带有填充，而不更改其对齐？

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

Gecko vs. Webkit：在内联块内填充

1 个答案: