2

XHTML 1.0 Transitionalを使用して構築されたクライアントのサイトで作業しています。HTML5に変更しています。

ただし、Doctype 宣言を HTML5 に切り替えると問題が発生します。表のセルは、約 2px の上下のパディングを取得します。

しかし、これは奇妙なことです: それは padding ではありません! Chrome の開発者ツールではパディング (緑) として表示されますが、DT のメトリクスセクションにはパディングがないことが明確に示されています。

パディングではない場合、それは何ですか? そして、それはどこから来たのですか？

私はすべてをゼロにしようとしましたが、役に立ちませんでした。

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 にコピーしようとしましたが、問題を再現できませんでした。

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 に答える