李元素中奇怪的表缘行为(Strange TABLE margin behaviour inside

我发现表一个很奇怪的保证金的行为时，它的LI元素中。李里面的表有一个能不能用“保证金”或“填充” CSS样式被取消前追加保证金。取消的唯一途径 - 是设置“显示：块”为LI（默认情况下它是“显示：列表项”）。下面是代码：

<!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>

这使得谷歌浏览器为：

截图＃1

我预计：

截图＃2

我真的不明白为什么这会发生保证金？李本身没有任何垫衬，表没有任何利润，但综合起来...

UPD。这个利润率仅出现在谷歌浏览器（24.0.1312.68）。在Mozilla Firefox（18.0.2）没有余量，页面看起来与预期（截图＃2）。

Answer 1:

虽然我认为更好的实施方案是使用锂标签内浮动的div来容纳你的形式，解决你与你的HTML设置看到的间距问题是显示加：内联表样式表的标签。（下面的代码复制，请注意，我搬到了CSS的头而不是它的标签是线上的。）

就在这个注：内联表属性不支持IE 7及以下的一切，你需要牢记在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>

Answer 2:

这看起来渲染正确的给我。如果你指的是在左侧的大空间，这是UL的一部分。

Answer 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>

文章来源: Strange TABLE margin behaviour inside LI element