Question

这可能是我见过的最不寻常的CSS行为：

我有一个非常简单的表，由两个单元格组成 - 一个是纯文本，另一个是链接：

<div class="content">
  <table>
    <tr>
      <td>
        Hello, world!
      </td>
      <td>
        <a href="#">Hello, world!</a>
      </td>
    </tr>
  </table>
</div>

我还在表格中应用了以下CSS：

div.content {
  background-color: green;
  height: 100px;
}

table td {
  background-color: red;
  height: 50px;
}

table td a {
  background-color: orange;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 8px;
  width: 100%;
}

在Chrome 28中呈现时，我看到以下内容：

enter image description here

为什么链接上方和下方有大量红色？我已为链接指定了height: 100%;，因此它应该占据<td>的完整高度，该高度具有明确的高度。

Answer 1

这绝对是box-sizing：border-box属性的问题。我的猜测是把它放在一个表格单元格中（处理方式不同于div）会让浏览器感到困惑。通常，新技术+旧技术不会混合。

我建议你做以下事情：

table td a {
  background-color: orange;
  display: block;
  height: 100%;
  padding: 8px;
}

宽度：100％是不必要的，因为表格单元格已经扩展到文本宽度+填充宽度。由于某种原因，它似乎没有将表格单元格的填充添加到100％的高度（去图，表格很奇怪！lol）。如果你需要它扩展到更大的表格单元格宽度，我建议然后将宽度：100％放回，但然后抛弃水平填充（即填充：8px 0px;）。

Answer 2

据我认为它的box-sizing属性导致了这种情况，请将你的css更改为：

table td a {
   background-color: black;
   height: 100%;
   display:block;
   margin: 0;
   padding: 0px;
   width: 100%;
   padding-top: 12px;
 }

希望有所帮助;

Answer 3

尝试将px的{{1}}设置为

Answer 4

将此代码添加到表td：

display:inline-block;

因为框建模中的表和分区之间存在一些差异。

您必须在任何非块元素上设置display-block以应用盒子模型样式。

Answer 5

这是一个陪审团的例子：http://jsfiddle.net/rTAwd/

我们使用行高调整单元格的高度，因此我们不需要混淆垂直对齐，并依赖于包装div来提供背景和填充。

<div class="content">
    <table>
        <tr>
            <td>Hello, world!</td>
            <td>
                <div> <a href="#">Hello, world!</a></div>
            </td>
        </tr>
    </table>
</div>

CSS

div.content {
    background-color: green;
    height: 100px;
}
table td {
    background-color: red;
}
table td div a {
    line-height: 2em;
}
table td div {
    background-color: orange;
    padding: 8px;
}

Answer 6

我认为这是一个错误，我之前有同样的问题，如果你想让文字在中间垂直对齐，而不是在display:block标签上使用<a>使用{{1并使用display:table代替border-spacing，如下所示：

padding

我删除了宽度：100％，因为它默认情况下会执行此操作，您可以看到示例here。 table td a { background-color: orange; display: table; height: 100%; border-spacing: 8px 13px; }是border-spacing的CSS属性。

为什么在此<a> increase the vertical margin?</a>中增加填充？

6 个答案: