Question

我的网站出现问题。 ie6中未正确显示以下代码。左侧填充缺失。

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
  <div style="margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;">
   <div style="float: right;">top_right</div>
   <div style="clear: both;"></div>
   <div>test</div>
  </div>
</div>

为了示例，我将所有样式更改为内联。我不想简单地将text-align设置为“top_right”文本，因为我还有其他一些奇怪的随机错误。此外，如果我删除背景颜色，它工作正常（在这种情况下）。

我该怎么办？感谢所有帮助，谢谢！

Answer 1

与IE6战斗时要尝试的第一件事是设置hasLayout。将zoom: 1用于第二个<div>。

Answer 2

一种解决方案可以是绝对定位，然后将右侧的距离设置为与填充相同。唯一的问题是左边的文字会在同一条线上，所以如果你需要它在自己的线上，你必须有一些间隔。

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
   <div style="position:relative; margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;">
      <div style="position:absolute; right:16px;">top_right</div>
      <div style="clear: both;"></div>
      <div>test</div>
   </div>
</div>

Answer 3

ie6宽度值必须是修复。

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
   <div style="margin: 0 0 48px; width:566px; padding:16px; border: 1px solid #404050; background-color: #a0a0a0;">
      <div style="float: right;">top_right</div>
      <div style="clear:both">test</div>
   </div>
</div>

float / background-color / padding ie6 bug

3 个答案: