2

I am working on a client's site that was built using XHTML 1.0 Transitional. I'm changing it to HTML5.

I run into a problem when I switch the Doctype declaration to HTML5 however: table cells acquire top and bottom padding of about 2px.

But here's the strange thing: it isn't padding! While it displays as padding (green) in Chrome's Developer Tools, the Metrics section of DT clearly shows that there isn't any padding.

So if it's not padding, what is it? And where does it come from?

I've tried zeroing everything but to no avail.

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);
}

I tried copying everything over to jsFiddle but I couldn't recreate the issue.

4

1 回答 1

3

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

此页面专门与 Chrome 相关，但我也观察到了 IE9 中的行为。

我从表格单元格中删除了line-height声明，但这还不够——我还必须将表格 line-height设置为0px。

table {
    line-height: 0px;
}

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

这解决了我的问题。

于 2013-07-16T04:02:45.690 回答