Question

table-default.html和table-dtd.html之间的差异是额外的一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在以下代码前面：

  <table align="center" border="0" cellpadding="0" cellspacing="0" width="960">
    <tbody><tr>
      <td bgcolor="#00ff00">Up</td>
    </tr>
  </tbody></table>

  <table align="center" border="0" cellpadding="0" cellspacing="0" width="960">
    <tbody><tr>
      <td bgcolor="#3f3f3f"><img src="http://dl.dropboxusercontent.com/u/467352/Screenshots/line.jpg" height="5" width="960"></td>
    </tr>
  </tbody>
  </table>  

  <table align="center" border="0" cellpadding="0" cellspacing="0" width="960">
    <tbody><tr>
      <td bgcolor="#0000ff">Down</td>
    </tr>
  </tbody></table>

如何使用table-dtd.html删除css中的额外空间（红线图像的上方和下方）？

Answer 1

由于第一个文件以怪癖模式呈现，因此td之类的块元素将围绕内联元素折叠。在标准模式下（使用doctype），他们不会。后者是标准行为;它与其他元素的工作方式更加一致。

解决方案是在图像上使用display:block，因此它不再是内联元素。

在<head>：

中

<style type="text/css">
  td img {display:block}
</style>

但如果这就是所有HTML的样子，那么需要更多批次来解决所有问题！

Answer 2

您可以将float: left用于您的图片：

<img style="float: left" ... >

display: block也适用（也许更优雅）：

<img style="display: block" ... >

为什么xhtml1-strict.dtd会提供额外的空间？

2 个答案: