表格单元格中的 div 元素具有某种间距答案

【问题标题】：div element in table cell has some kind of spacing表格单元格中的 div 元素具有某种间距
【发布时间】：2013-04-07 10:32:44
【问题描述】：

好的，我知道使用表格进行布局是不好的。但是我们有一个在所有工作站上都安装了 ie6 的客户端，我们必须制作一个可以完美运行的复杂布局，所以干净的 CSS 解决方案不起作用，所以我不得不用表格来做。

这是我拥有的 HTML 代码：

<body>
<table id="main_table">
  <tr>
    <td>
      <div class="content">Content</div>
    </td>
  </tr>
</table>
</body>

这是我拥有的 CSS：

body {
        margin:0;
        padding:0;
     }
#main_table {
        border-collapse:collapse;
        border-spacing:0;
        width:100%;
     }
#main_table td {
         margin:0;
         padding:0;
     }
#main_table div.content {
         margin:0;
         padding:0;
     }

由于某种神秘的原因，单元格的顶部和 div 之间存在某种边距。我绝对肯定我的所有边距和填充都为 0，但它仍然存在。

我试过了：

一个跨度而不是div，问题仍然存在
在表格单元格上使用 position:relative，在 div 上使用 position:absolute，但 div 总是从浏览器的左上角开始，而不是元素的左上角

过去有人遇到过类似的问题吗？提前感谢您的帮助。

编辑：问题不仅在 IE6 中，而且在所有浏览器中。

【问题讨论】：

尝试使用萤火虫查看边距在哪里
我尝试用萤火虫检查，但没有看到任何边距或填充...
好吧，我现在感觉自己像个菜鸟。我发现了问题：这是我的单元格为其添加了一些高度，并且垂直对齐是中间的默认值。所以整个 div 都在单元格的中间，并在顶部留下了看起来像边缘的东西。我真的觉得这个很白痴...感谢大家的投入！我会去找一个山洞并在那里藏几年......;）
@Gabriel：如果这是解决方案，请将其发布为答案并将其标记为已接受。

标签： css html css-tables

【解决方案1】：

我认为您想使用#main_table tr td 或#main_table tbody tr td 来获取单元格并删除它们的填充和边距，但我不确定100%。它现在在其他浏览器中是否正确显示？您能否使用 IE 开发人员工具栏之类的工具验证您的 css 规则是否已应用于您的单元格？

【讨论】：

我应该指定问题不仅存在于 IE6 中，而且存在于其他浏览器中......我将更新我的问题以反映这一点。

【解决方案2】：

ie6 = 世界的敌人。不能保证，但可以尝试使用“0px”而不是“0”。

你也试过把<table cellspacing="0" cellpadding="0">放进去吗？

实在想不出别的了。

能给个链接吗？

【讨论】：

【解决方案3】：

您是否尝试过单元格填充/间距。因为没有IE6，所以无法测试。我什至不再支持 IE6，微软已经放弃了对它的支持，如果他们不再支持它，我也不会支持。

<table id="main_table" cellpadding="0" cellspacing="0">

【讨论】：

微软似乎继续为大型组织提供 IE6 支持。既然这个问题，对于这样一个大机构的内网，很难不支持。剩下的时间，我都不支持IE6了……

【解决方案4】：

只需添加

body { line-height:0;}

【讨论】：

【解决方案5】：

我对 IE-6 填充/边距问题的通用修复是（因为我们不再支持它）为有问题的容器元素提供 IE 专有的zoom property，其值为 100% 以触发 hasLayout。 YMMV。

#main_table td div.content { zoom:100%; }

【讨论】：

【解决方案6】：

您在项目中使用了'reset.css' 吗？因为大多数情况下，如果我们不为任何元素指定任何样式，它们的浏览器会在这些地方使用其默认设置。

【讨论】：

【解决方案7】：

@Gabriel 您可能知道，所有浏览器都有一些默认设置，并且当我们不为任何标签提供任何样式时，浏览器会为该特定标签提供其默认样式。我建议你使用'reset.css'，你可以在你的项目中找到here。给出了四种类型的 CSS，其中 Eric Meyer 的“Reset CSS”是最好的。

【讨论】：

【解决方案8】：

好吧，我似乎完全忘记了为这个问题寻找答案，而且似乎 2 年后有些人仍然觉得需要添加新的答案，所以这是我的问题的解决方案（我在 cmets 的我原来的问题）

问题是我的单元格有一些高度，并且垂直对齐是中间的默认值。所以整个 div 都在单元格的中间，并在顶部留下了看起来像边距的东西。

所以这不是一个真正的问题，只是我不再习惯用表格进行 html 布局......

这就是问题的答案......现在如果有人可以关闭这个问题以防止任何进一步的 cmets/answers，那就太好了...... ;)

【讨论】：