div内联块内的H2奇怪的偏移量

Question

我有一个<a> 包围一个<div>，它还有一些图像、一个<h2> 和一段文字。 <a> 都是inline-block。每当 H2 延伸到两行时，下一个 <a> 就会偏移。下面是截图。

HTML：

<a href="#">
    <div>
        <div class="imgOverflow">
           <img src="/hello/there">
        </div>
        <h2>This is the title</h2>
        <p>This is a paragraph</p>
    </div>

</a>

CSS：

a {
    display:inline-block;
    font-size:16px;
    border:1px solid grey;
    width:260px;
    margin:5px;
    color:black;
    overflow: hidden;
}
div {
    display:block;  
    padding:5px;
    width:250px;
    height:300px;
}   
p {
    font-size:12px;
    text-align:justify;
 }
h2 {
    margin:5px 0 10px 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.imgOverflow {
    margin:-5px 0 0 -5px;
    width:260px;
    padding:0;
    overflow:hidden;
    height:130px;
    display:block;
}       

如果有人知道某种 CSS 属性来避免这种情况，那将非常有帮助。谢谢。

Answer 1

我猜这是因为您的 a 元素与底部垂直对齐，并且您的一些 h2 元素跨越两行，而最后一个元素只有一行。试试这个：

a { 
display:inline-block;
font-size:16px;
border:1px solid grey;
width:260px;
margin:5px;
color:black;
overflow: hidden;
vertical-align: top; /* Notice this line */
}

A working example

编辑

此编辑是在 imray 的问题之后进行的。

我已经在 Ubuntu 12.04 LTS - Chrome 33.0.1750.152 中再次测试了代码，差不多 2 年后，这个问题已经得到答复，并发现 - 现在 - 当您删除 vertical-align 属性时，代码往往会作为好吧。但是，如果您删除 overflow 属性，那么您将看到显示中断。

现在，想象以下情况：

This is our container:
------------------------------------------------
|                     Element 2:               |
|    Element 1:       --------------------     |
|    -------------    | Lorem ipsum dolor|     |
|    | Lorem ips |    | sit amet         |     |
|    -------------    --------------------     |
------------------------------------------------

当默认值打开时，element 1 和 element 2 将与其容器的基线对齐，并且该基线显然会根据容器的高度而变化，最终由容器的高度决定孩子 - 如果没有指定。

显然，在撰写本文时 - 由于浏览器的 css 实现往往会随时间而变化，删除 vertical-align: bottom 并留下 overflow: hidden 似乎可以使代码工作 - 未在其他浏览器中测试 - 但又一次简单将它们与顶部对齐，应该可以完全解决问题，因为当您与顶部对齐时，下一行中的元素将与该行的顶部对齐。