Question

我正在使用 XHTML 1.0 Transitional 构建的客户端网站上工作。我正在将其更改为 HTML5 。

当我将Doctype声明切换为HTML5时遇到问题：表格单元格获取大约2px的顶部和底部填充。

但这是奇怪的事：它不是填充！虽然Chrome的开发人员工具中显示为填充（绿色），但DT的 Metrics 部分清楚地显示没有任何填充。

所以，如果它不是填充，它是什么？它来自哪里？

我已经尝试将所有内容归零，但无济于事。

HTML：

<DOCTYPE html>
<html>
  <table>
    <tbody>
      <tr>
        <td><a href="/somepage1">Link</a></td>
        <td><a href="/somepage2">Link</a></td>
        <td><a href="/somepage3">Link</a></td>
        <!-- etc etc -->
      </tr>
    </tbody>
  </table>
</html>

CSS：

table, tbody, tr, th, td {
  margin: 0px;
  border: 0px;
  padding: 0px;
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  line-height: 20px;
  vertical-align: middle;
  border-spacing: 0;
}
a {
  display: block;
  width: 50px;
  height: 20px;
  margin: 0px;
  padding: 0px;
  background: url(somebackground-image);
}

我尝试将所有内容复制到jsFiddle但我无法重新创建问题。

Answer 1

原来这显然是与HTML5相关的问题。

This page 专门针对Chrome，但我也观察到了IE9中的行为。

我从表格单元格中删除了 line-height 声明，但这还不够 - 我还必须设置表格行高< / strong>到 0px 。

table { line-height: 0px; } td { /* make sure no line height is set on td */ /* line-height: somepx; */ }

这解决了我的问题。

HTML5中的表格单元格顶部和底部填充 - 它来自哪里？

1 个答案: