LI 元素内奇怪的 TABLE 边距行为答案

【问题标题】：Strange TABLE margin behaviour inside LI elementLI 元素内奇怪的 TABLE 边距行为
【发布时间】：2013-01-29 19:52:22
【问题描述】：

当表格位于 LI 元素内时，我发现表格的边距行为非常奇怪。在 LI 内部，TABLE 在顶部有额外的边距，不能通过使用“margin”或“padding”CSS 样式来取消。取消此操作的唯一方法是为 LI 设置“display: block”（默认为“display: list-item”）。代码如下：

<!DOCTYPE html>
<html>
  <head>
      <title>Strange table margin behaviour</title>
  </head>
  <body>
    <ul>
      <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
      <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
      <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
    </ul>
  </body>
</html>

这在 Google Chrome 中呈现为：

screenshot #1

我希望：

screenshot #2

我真的不明白为什么会出现这种情况？ LI 本身没有任何 paddings，TABLE 没有任何边距，但是在一起...

UPD。此页边距仅出现在 Google Chrome (24.0.1312.68) 中。在 Mozilla Firefox (18.0.2) 中没有边距，页面看起来如预期（屏幕截图 #2）。

【问题讨论】：

您在这样的列表中嵌套表格有什么特别的原因吗？当然，在不使用列表的情况下设置表格样式会更容易/更好。如果您迫切需要将它们包装起来，甚至可以使用 div 而不是列表。 IMO 列表应用于列出单个项目，而不是项目表。
是的，原因是我需要显示一个树，其中每个内部元素都有一个 html 表单，看起来像 this。是的，还有其他技术可以做到这一点，但我对未来的这方面很感兴趣。

标签： html css html-table html-lists margin

【解决方案1】：

虽然我认为更好的实现是在 li 标记内使用浮动 div 来容纳您的表单，但您在 HTML 设置中看到的间距问题的解决方案是添加一个 display: inline-table 样式到 table 标签。（下面复制的代码；请注意，我将 CSS 移动到标题而不是内联在标签中。）

请注意：IE 7 及更低版本根本不支持 inline-table 属性，您需要注意 IE 8 中的 doctype。这在 FF、Chrome 和 IE 中应该可以正常工作9.

见：http://www.w3schools.com/cssref/pr_class_display.asp

 <!DOCTYPE html>
    <html>
      <head>
          <title>Strange table margin behaviour</title>
          <style type="text/css">
            li { border: 1px solid #000099; margin: 0; padding: 0; }
            table { border: 1px solid #ccc; display: inline-table; margin: 0; padding: 0; }
          </style>
      </head>
      <body>
        <ul>
          <li><table><tr><td>test</td></tr></table></li>
          <li><table><tr><td>test</td></tr></table></li>
          <li><table><tr><td>test</td></tr></table></li>
        </ul>
      </body>
    </html>

【讨论】：

谢谢。有用。但是你知道为什么谷歌浏览器能做到这一点，而 Firefox 没有吗？哪些 CSS 样式会影响此边距的大小？更改显示属性是一种破坏 HTML 元素含义的肮脏黑客行为。

【解决方案2】：

我觉得这个渲染是正确的。如果您指的是左侧的大空间，那是 UL 的一部分。

【讨论】：

对不起，我不准确。桌子顶部的大空间。我现在就解决问题。
我希望这应该是这样的：screenshot

【解决方案3】：

正如提到的像素，渲染看起来不错。您指的额外保证金是多少？

一种更简洁的方法是省略列表标签，只自行定位表格元素。或者将它们包装在一个 div 中以获得更大的灵活性。我创建了一个 jsFiddle 作为示例.. http://jsfiddle.net/Lz9fu/2/

<div id="table_c">
      <table><tr><td>test</td></tr></table>
      <table><tr><td>test</td></tr></table>
      <table><tr><td>test</td></tr></table>
</div>

【讨论】：

表格顶部的附加边距。
在您的带有“规范化 CSS”复选框的 jsFiddle 示例中，它在 LI 元素中呈现时没有上边距。这个复选框到底有什么作用？
我没有注意到这一点。我猜该复选框使用 reset.css 来设置 html 标签的默认属性。查看meyerweb.com/eric/tools/css/reset