并排放置 2 个 div / Internet Explorer 6/7 浮动和填充（？）错误修复答案

【问题标题】：Putting 2 divs side by side / Internet Explorer 6/7 float and padding (?) bug fix并排放置 2 个 div / Internet Explorer 6/7 浮动和填充（？）错误修复
【发布时间】：2010-10-19 14:14:50
【问题描述】：

我需要并排放置 2 个 div。但更重要的是，我希望它在 IE6/7 中正确显示。不过，我已经设法用 Firefox 成功了。我的代码：

#container{
    padding:10px;
}

#left{
    float:left;
    width:500px;
}

#right{
    width: 300px;
    float:right;
    padding:7px;
    background-color:#F0FCEB;
}

<div id="box"> 
<div id="left">Some content here</div> 
<div id="right">Some content here 2</div>
<div style="clear:both;"></div>
</div>

结果如下图：

所需输出（FF 输出）：

IE6/7 输出：如何在 IE 中摆脱这种不必要的填充，或者有其他方法吗？注意：我使用 jQuery 和 Nifty for jQuery 创建圆角。

【问题讨论】：

了解
的实际 HTML 内容可能很有用。屏幕截图让它看起来像是 FF 和 IE 之间表单元素的填充差异。
看看：stackoverflow.com/questions/591539/…

标签： html internet-explorer css-float css

【解决方案1】：

这里有一些内容 2

那是什么内容？您的示例按原样工作，因此是内容本身导致问题的原因。

它是否可能包括一个表格，就像镜头上的样子？

有一个默认的上/下边距，垂直边距如何折叠是一些混淆和浏览器差异的问题（如果可能，通常最好避免）。所以迷你重置规则：

form { margin: 0; }

可能有帮助。

【讨论】：

【解决方案2】：

不要使用桌子！我经常对长表格使用无序列表。但这里 2 个 div 可能会起作用。确保为便于访问，你有 Ara: 标记为 <label> 和你 associate it with the input field

确保在表达您的项目之前已重置项目的默认填充和边距。

#box label, #box input {margin:0;padding:0;}

【讨论】：

【解决方案3】：

使用<table>，根据我的经验，它们最适合并排对齐

【讨论】：

它实际上是，但是随着围绕将表格更改为 div 的所有趋势，尽管我可能会跟随人群并将其切换为表格（正如问题的标签之一所暗示的那样）:)

这在语义上是不正确的，因为没有要显示的表格数据。

为什么要打系统？在网页中并排对齐时，表格是最好的。我知道不应该这样，但事实就是这样。见：stackoverflow.com/questions/591539/…