Question

我网站子节的标题由4个垂直堆叠的div组成。包含图像的第五个div漂浮在距离右边界稍远的4个div上。这种布局在Firefox，IE8，Chrome和其他浏览器上运行良好，但在IE7和IE6上，div不会漂浮在其他div上，弄乱了我的布局。我该如何解决这个问题？

HTML就像那样简单：

<div class="inter_auth">
  <div class="inter_photo">
    <img name="" src="{{ uri options="image 1" }}" width="100" height="112" border="0" />
  </div>
  <div class="other_div1">
  </div>
  <div class="other_div2">
  </div>
  <div class="other_div3">
  </div>
  <div class="other_div4">
  </div>
</div>

容器CSS是：

.inter_auth { 
  width:315px; 
  background:#ffffff; 
  font-family: Verdana, Geneva, sans-serif; 
  font-size: 10px; 
  text-align:left; 
  min-height:1px;
  overflow:hidden;
  zoom:1; }

图片CSS是：

.inter_photo { 
  position:relative; 
  float:right; 
  margin:2px; 
  top:-2px; 
  left: -15px; 
  background:#899ca2; 
 *background-image: url(transparent.gif); }

Answer 1

相反，您可以尝试绝对定位元素。您的包装器.inter_auth应相对定位，子div可以绝对定位在父div中。您应该能够使用top，left，bottom和right属性精确对齐它们。这是一个quick tutorial定位。查看底部关于重叠元素的部分。

IE6和IE7上的浮动问题

1 个答案: