Question

好的，我知道使用表格进行布局很糟糕。但是我们有一个客户端在所有工作站上都安装了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上使用absolute：但div总是从浏览器的左上角开始占据他的位置，而不是元素的左上角

过去任何人都有过类似的问题吗？在此先感谢您的帮助。

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

Answer 1

我认为您希望使用#main_table tr td或可能#main_table tbody tr td来获取单元格并删除其填充和边距，但我不是100％肯定。它现在在其他浏览器中是否正确显示？你能用IE Developer Toolbar验证你的css规则是否适用于你的单元格？

Answer 2

ie6 =世界的敌人。不保证，但尝试放“0px”而不是“0”。

您是否尝试过<table cellspacing="0" cellpadding="0">？

真的不能想到其他的东西。

我们可以有一个链接玩吗？

Answer 3

你尝试过cellpadding / spacing。我无法测试它，因为我没有IE6。我甚至不再支持IE6，微软已经放弃了对它的支持，如果他们不再支持它，我也不会支持它。

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

Answer 4

是的我有类似的问题，表中有很多内置的时髦规则，特别是在IE6中。唯一可以修复的是使用带有CSS的div并具有IE6特定规则来修复IE盒模型问题。可能存在一些像这样的IE6特定问题： Internet Explorer table 1 pixel spacing problem

Answer 5

添加

body { line-height:0;}

Answer 6

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

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

Answer 7

您在项目中使用'reset.css'了吗？因为大部分时间如果我们没有为任何元素指定任何样式，它们浏览器会在这些位置使用其默认设置。

Answer 8

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

Answer 9

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

问题是我的单元格有一些高度，而vertical-align是默认值middle。所以整个div都位于单元格的中间，并且在顶部留下了一个边缘。

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

在那里，这就是问题的答案......现在如果有人可以关闭这个问题以防止任何进一步的评论/答案，那就太棒了......;）

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

9 个答案: