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

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标签。

我很确定这与内嵌块显示样式有关，因为如果我将块显示样式应用于所有标签并省略BR标签，则此问题会被绕过，但会更多。这里的例子http://jsfiddle.net/rHupy/3/

我也试过将块显示样式和float左边样式结合起来，但是这给了我更多的问题;一些元素会崩溃，而不是相互对齐。

我的问题是：为什么在内嵌块显示样式中设置“限制”某个值的A标签上应用了负余量？

来源

2013-05-02 mkey

我有点困惑。你能用一句话总结一下你需要什么吗？第二个小提琴看起来像你想要我的...... – 2013-05-02 08:29:55

作为一个方面说明：尝试点击jsfiddle中的链接以获得'fiddleption'。 – 2013-05-02 08:31:14

@CedricReichenbach读完最后一段，你这样做后应该分散。 – mkey 2013-05-02 08:32:59

好吧，我玩了更多，这里是结果。

最初的文档类型产生了这个。

HTML

<!DOCTYPE html>

doctype 1 results

更改文档类型给出了完全不同的结果，具有完全相同的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>

比方说，这解决了我的p尽管我不明白进行这种改变的所有后果，

来源

2013-05-02 16:59:59 mkey

hmh，这显然适用于最新的Firefox，但不适用于Chrome。所以它离解决方案还很遥远。 – mkey 2013-05-02 17:12:16

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

回答

相关问题