如何在 IE6 中对齐浮点数答案

【问题标题】：how to align floats in IE6如何在 IE6 中对齐浮点数
【发布时间】：2012-05-05 07:44:12
【问题描述】：

我在 IE6 中显示浮动段落和图像时遇到问题。不过，在 Opera 和 Firefox 中显示这些内容没有问题。我在一个容器中有三个 div。每个 div 都有自己的段落和图像，可以向左或向右浮动。为了让我达到理想的布局，我在大部分段落和图像上设置了负边距。

这是我对齐浮动的方式：

---- 容器的 CSS 代码 -----

.container {
clear:both;
background:url(images/content_bg.png) repeat-x scroll 0 0 transparent;
width:850px;
height:750px;
overflow:hidden; 
margin:0 auto;
}

----- 第一个 div 的 CSS 代码 -----

.row1 {
float:left;
width:790px;
height:460px;
margin:5px 0 0 40px;
}

.pic1 {
float:right;
height:460px;
width:382px;
margin:-100px -50px 0 -60px;
}

h2, p {
font-family:Arial, Helvetica, sans-serif;
}

.row1 p {
font-size:12px;
text-indent:20px;
font-weight:bold;
text-align:justify;
margin:-10px -25px 0 0;
position:relative;
}

----------- 第二个 div 的代码 -------------

.ro2 {
float:left;
width:790px;
height:234px;
margin:-185px 0 0 28px;
position:relative;
}

.row2 p {
float:right;
font-size:12px;
font-weight:bold;
text-align:justify;
text-indent:20px;
margin:-195px 258px 0 175px;
position:relative;
}

.pic2 {
float:left;
}

--------- 第三个 div 的代码 ---------------

.row3 {
float:left;
width:790px;
height:203px;
margin:-10px 0 0 40px;
position:relative;
}


.row3 p {
float:left;
font-size:12px;
font-weight:bold;
text-indent:20px;
text-align:justify;
margin:-180px 265px 0 10px;
position:relative;
}

.pic3 {
float:right;
}

div 的高度（.row1 到 .row3）基于图像的高度，因此 div 可以同时包含段落和图片。在 IE6 中查看时，这些段落似乎与图像相距甚远。有些段落与其他图片重叠。

【问题讨论】：

你有任何我们可以看到的 html 吗？如果不知道你的元素是如何嵌套的，这很难说。

标签： css css-float margin

【解决方案1】：

IE6 不受支持且包含许多“错误”...您应该为 IE7 及更高版本开发...

关于你的 CSS：

你正在使用 position:relative;但是没有设置任何坐标，IE6不喜欢，去掉试试！

你没有显示所有的类都在哪里应用，一些 HTML 标签在 IE6 中与 margin 不匹配，尝试使用 padding 代替。

让您在 IE6 中正常工作的一个好方法是使用 table 而不是 div，但 div 像这样工作得很好：

<div class="container" style="width:800px;">

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

</div>

这是一个示例，只是为了说明您应该在 IE6 中将文本和图像包装在一个 div 中，并且该 div 是浮动的...

希望对你有帮助...

【讨论】：

【解决方案2】：

IE6 有一个影响浮点数的错误，它使边距成为实际值的两倍。我敢打赌这是问题所在，因为您设置了边距，并说“在 IE6 中查看时，这些段落似乎与图像相距甚远。有些段落与其他图像重叠。”

谢天谢地，有一个简单的解决方法 - 每当您设置浮点数时，也要设置“display:inline”。如果不会影响其他浏览器，并且会阻止 IE 6 将边距加倍。

见positioniseverything's article on this。请注意，您必须在 IE6 中查看该页面才能使示例有意义。

【讨论】：