Fatal编程技术网
  • html/
  • Html 严格的DocType强制使用FF/Chrome中的最小表格行高度

Html 严格的DocType强制使用FF/Chrome中的最小表格行高度

html css

Html 严格的DocType强制使用FF/Chrome中的最小表格行高度,html,css,Html,Css,我以前从未注意到，但在Chrome/Firefox中（可能还有Opera/Safari，我没有特别检查），使用严格的doctype可以防止表行显示的值小于我无法确定的计算值 下面的文档如人们在IE7中所想象的那样显示，所有表格行的高度都在8px左右，以匹配内容的高度（了解IE可能是不正确的），而在Chome/Firefox中，这些行的高度都是23px。我发现，任何边框折叠、填充、边距等组合都不会允许行小于此值 <!DOCTYPE html PUBLIC "-//W3C//DTD X

我以前从未注意到，但在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>


跨度{
字体系列：Verdana；
字号：8px；
线高：8px；
}
一个
两个
三
四
五
六
七
八
九
将doctype设置为transitional将导致表格行显示的高度与预期的高度约为8px

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

欢迎提供任何信息。

您需要在
和
上设置行高

这里有一个更好的解释：

在浏览器中查看下面的代码

请注意，尽管我们设置了第二组
标记的字体大小，但实际的表格单元格大小相同

这是因为表格单元格的字体大小仍然相同。我们只更改了其中的一个子元素，即

设置
body{font-size:8px}
可以正常工作，因为表将继承此值。 您也可以直接在表ie
表{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>


主体{}
td{}
span{font-family:Verdana；}
span.small{字体大小：8px；}
默认字号
一个
两个
三
四
五
六
七
八
九
8px字体大小
一个
两个
三
四
五
六
七
八
九
希望这有帮助

谢谢，就这样。你知道为什么默认值是23px吗？这似乎是一件很奇怪的事情，在严格模式下，只有您没有为文档设置字体大小或行高，只有span标记，所以使用了默认值。例如，如果您将body设置为font size:8px，则所有子元素都将采用此值，包括您的td标记。非常感谢。在来这里之前，我花了几个小时调查这个问题！太好了，谢谢你帮我清理。只是有点困惑，为什么严格模式在所有元素上强制使用默认字体大小，而transitional似乎没有 
<!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>