严格的DocType强制FF / Chrome中的最小表格行高

时间:2010-10-14 09:33:43

标签: html css

我之前从未注意过的东西,但似乎在Chrome / Firefox(可能是Opera / Safari,我没有特别检查过)使用严格的doctype可以防止表格行显示小于我的值我无法确定计算。

以下文档显示在IE7中可以想象的所有表格行高度大约为8px以匹配内容的高度(这可能是错误的知道IE),而在Chome / Firefox中,行都是23px高。我发现没有边框折叠,填充,边距等的组合将允许行小于此。

    <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <style>
    span {
      font-family: Verdana;
      font-size: 8px;
      line-height: 8px;
    }
  </style>
</head>
<body>
  <table cellspacing="1" border="1">
    <tr>
      <td><span>One</span></td>
      <td><span>Two</span></td>
      <td><span>Three</span></td>
    </tr>
    <tr>
      <td><span>Four</span></td>
      <td><span>Five</span></td>
      <td><span>Six</span></td>
    </tr>
    <tr>
      <td><span>Seven</span></td>
      <td><span>Eight</span></td>
      <td><span>Nine</span></td>
    </tr>
  </table>  
</body>
</html>

将doctype设置为transitional会导致表格行按预期显示高度约8px。

有没有人知道是什么导致了这个明显的最小行高?

为任何信息干杯。

2 个答案:

答案 0 :(得分:3)

您需要在<td>以及<span>

上设置行高
td{line-height:8px;}

答案 1 :(得分:1)

这是一个更好的探索:

在浏览器中查看以下代码。

请注意,尽管我们设置了第二组<span>标签的字体大小,但实际的表格单元格大小相同。

这是因为表格单元格 IS 的字体大小仍然相同。我们只更改了它们的子元素,即<span>

设置body{font-size:8px}可以正常工作,因为表将继承此值。 您也可以直接在表table{font-size:8px}上使用它,或者您可以在上面发布的单元格中使用它。

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <style>
    body{}
    td{}
    span {font-family: Verdana;}

    span.small{font-size:8px;}
  </style>
</head>
<body>
<h1>Default font size</h1>
  <table cellspacing="1" border="1" cellpadding="0">
    <tbody>
        <tr>
          <td><span>One</span></td>
          <td><span>Two</span></td>
          <td><span>Three</span></td>
        </tr>
        <tr>
          <td><span>Four</span></td>
          <td><span>Five</span></td>
          <td><span>Six</span></td>
        </tr>
        <tr>
          <td><span>Seven</span></td>
          <td><span>Eight</span></td>
          <td><span>Nine</span></td>
        </tr>
    </tbody>
  </table>  

  <h2>8px font size</h2>
   <table cellspacing="1" border="1" cellpadding="0">
    <tbody>
        <tr>
          <td><span class="small">One</span></td>
          <td><span class="small">Two</span></td>
          <td><span class="small">Three</span></td>
        </tr>
        <tr>
          <td><span class="small">Four</span></td>
          <td><span class="small">Five</span></td>
          <td><span class="small">Six</span></td>
        </tr>
        <tr>
          <td><span class="small">Seven</span></td>
          <td><span class="small">Eight</span></td>
          <td><span class="small">Nine</span></td>
        </tr>
    </tbody>
  </table>

</body>
</html>

希望这有帮助