Question

我在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;
}

---------第3个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中查看时段落似乎远离图像。有些段落与其他图像重叠。

Answer 1

IE6它不受支持并包含许多“错误”......你应该为IE7及以上版本开发......

关于你的css：

你正在使用职位：亲属;但是没有设置任何坐标，IE6不喜欢这样，尝试删除它！

您没有显示应用所有类的位置，某些HTML标记在IE6中的边距不合适，请尝试使用填充。

你在IE6中运行良好的一个好方法是使用表而不是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是浮动的那个......

希望它有所帮助...

Answer 2

IE6有一个影响浮动的bug，这使得边距加倍实际值。我打赌这是问题所在，因为你有边缘设置，并说“在IE6中查看时段落似乎远离图像。有些段落与其他图像重叠。”

值得庆幸的是，有一个简单的解决方法 - 只要你设置一个浮动，也可以设置'display：inline'。如果不会影响其他浏览器，将阻止IE 6加倍边距。

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

如何在IE6中对齐浮点数

2 个答案: