2

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？

4

2 回答 2

2

由于第一个文件是在 quirks 模式下呈现的，所以像块元素这样的块元素td会在行内元素周围折叠。在标准模式下（使用文档类型），它们不会。后者是标准行为；它与其他元素的工作方式更加一致。

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

在<head>：

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

但如果这就是所有 HTML 的样子，那就需要做更多的工作来消除所有的怪癖！

于 2013-06-27T11:53:22.093 回答
1

您可以使用float: left您的图像：

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

display: block也可以（也许更优雅）：

<img style="display: block" ... >
于 2013-06-27T11:48:36.040 回答