Css 如何在IE6中对齐浮动
我在IE6中显示浮动段落和图像时遇到问题。不过,在Opera和Firefox中显示它们并没有问题。我在一个容器里有三个div。每个div都有自己的段落和图像,可以向左浮动,也可以向右浮动。为了达到预期的布局,我在大多数段落和图像上设置了负边距 下面是我如何对齐浮动的: ----容器的CSS代码----- -----第一个div的CSS代码------ -----------第二组代码------------- ---------第三组代码---------------Css 如何在IE6中对齐浮动,css,css-float,margin,Css,Css Float,Margin,我在IE6中显示浮动段落和图像时遇到问题。不过,在Opera和Firefox中显示它们并没有问题。我在一个容器里有三个div。每个div都有自己的段落和图像,可以向左浮动,也可以向右浮动。为了达到预期的布局,我在大多数段落和图像上设置了负边距 下面是我如何对齐浮动的: ----容器的CSS代码----- -----第一个div的CSS代码------ -----------第二组代码------------- ---------第三组代码--------------- div的高度(.row1到
div的高度(.row1到.row3)基于图像的高度,因此div可以同时包含段落和图片。在IE6中查看时,这些段落似乎与图像相差甚远。有些段落与其他图像重叠。IE6不支持,并且包含许多“错误”。。。你应该为IE7和更高版本开发 关于你的css: 您使用的是position:relative;但不设置任何坐标,IE6不喜欢这样,请尝试删除它 您没有显示所有DO类的应用位置,一些HTML标记与IE6中的边距不匹配,请尝试使用填充 在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是浮动的
希望它能有所帮助……IE6有一个影响浮动的错误,它使利润率翻了一番。我打赌这就是问题所在,因为你已经设置了边距,并且说“在IE6中查看时,段落似乎与图像相差很远。有些段落与其他图像重叠。” 谢天谢地,这有一个简单的解决方法——无论何时设置浮点,也可以设置“display:inline”。If不会影响其他浏览器,并且会阻止IE6将利润翻一番
看。请注意,您必须查看IE6中的页面才能理解示例。您有我们可以看到的html吗?如果不知道元素是如何嵌套的,就很难判断。
.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;
}
.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;
}
.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 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>