Question

考虑这个简单的例子。

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标记可以正常工作，也就是说，您可以使用-25px使绿色A标记完全覆盖DIV标记。

我很确定这与内联块显示样式有关，因为如果我将块显示样式应用于所有标记并省略BR标记，则会避免这个问题，但会出现更多问题。示例http://jsfiddle.net/rHupy/3/

我也尝试将块显示样式与浮左样式相结合，但这给了我更多的问题;一些元素会崩溃，而不是彼此对齐。

我的问题是：为什么在带有内联块显示样式的A标签上应用的负边距设置为“限制”到某个值？

Answer 1

好的，我用它玩了一些，这是结果。

最初的doctype产生了这个。

<强> HTML

<!DOCTYPE html>

doctype 1 results

更改doctype会产生完全不同的结果，并且CSS和HTML完全相同。

<强> HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

doctype 2 results

这是最终的HTML

<强> HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            div > a {
                background-color:green;
                border:1px solid red;
                display:inline-block;
                height:20px;
                margin-bottom:-15px;
                margin-right:11px;
                width:23px;
            }

            div > a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + br + a {
                margin-left:17px;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
        </div>
    </body>
</html>

让我们说这解决了我的问题，即使我不明白做出这一改变的所有后果。

“A”标签，内联块和负边距

1 个答案: