考虑这个简单的例子。
HTML
<div>
<a href="/">Some link here</a>
<div>a div here</div>
<a href="/">Another link</a>
<br/>
<a href="/">And one more!</a>
</div>
CSS
div > a, div > div {
color: white;
line-height: 1.6;
height: 30px;
text-align: center;
width: 150px;
}
div > a {
border: 1px solid black;
display: inline-block;
text-decoration: none;
}
div > a:first-child {
background-color: red;
margin-bottom: -8px;
}
div > div + a {
background-color: green;
margin-bottom: -8px;
}
div > br + a {
background-color: blue;
}
div > div {
background-color:black;
border: 1px solid gray:
margin-bottom:-8px;
}
在这里摆弄 http://jsfiddle.net/rHupy/2/
此问题与最新的 Chrome 和 Firefox 有关。
我昨天整个下午都在摆弄这个。基本上,在这个例子中,负下边距的行为非常奇怪。如果您在红色 A 标签上使用负边距,它将在 DIV 标签中绘制,但最多为 8px。如果你低于 -8px(一个更负的值,即)DIV 标签保持不变,它不会被更多地绘制到红色的 A 标签中。
将边距应用于 DIV 标签可以按预期工作,即您可以使绿色 A 标签完全覆盖 -25px 的 DIV 标签。
我很确定这与 inline-block 显示样式有关,因为如果我将块显示样式应用于所有标签并省略 BR 标签,则可以避免此问题,但会出现更多问题。这里的例子http://jsfiddle.net/rHupy/3/
我也尝试过将块显示样式与左浮动样式结合起来,但这给了我更多的问题;有些元素只会折叠,而不是相互对齐。
我的问题是:为什么将负边距应用于具有内联块显示样式的 A 标记将“限制”设置为某个值?