css - IE6 和 IE7 上的 float 问题

Question

我网站子部分的标题由 4 个垂直堆叠的 div 组成。第五个包含图像的 div float 在这 4 个 div 上方，离右边界稍远。此布局在 Firefox、IE8、Chrome 和其他浏览器上运行良好，但在 IE7 和 IE6 上，div 不会 float 在其他 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定位上。查看底部关于重叠元素的部分。