1

考虑这个简单的例子。

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 标记将“限制”设置为某个值?

4

1 回答 1

1

好的,我又玩了一些,结果如下。

最初的 doctype 产生了这个。

HTML

<!DOCTYPE html>

doctype 1 结果

更改文档类型会产生完全不同的结果,但 CSS 和 HTML 完全相同。

HTML

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

doctype 2 结果

这是最终的 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>

可以说这解决了我的问题,即使我不了解进行此更改的所有后果。

于 2013-05-02T16:59:59.363 回答