ie6影子问题

Question

演示：http://jsbin.com/esupex/2

我在盒子上有阴影，它使div在新线上移动，如果我移除阴影，div会回到同一条线上。以下是截图。

ie6阴影突破错误 - full image：

ie6没有阴影（这只是为了显示没有阴影后它看起来像什么，但我们确实需要阴影） - full image：

最终布局应如下所示。这个截图来自firefox - full image：

以下是导致问题的行，我不知道如何解决它：

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');

Answer 1

如果你必须在IE中有阴影，那么在渲染得太低的框中添加一个负边距。

http://jsbin.com/esupex/36

我添加修改为：

#playerNavBox {
  height:36px;
  margin-right: 260px;
  *margin-top: -43px;
}

Answer 2

您是使用固定或流畅的布局吗？问题是最右边的div不能将自己定位在左边的旁边。给左边一个浮动，一个固定宽度，用px或％，所有都应该没问题。

如果您的布局不稳定：请注意px中的边框，阴影，边距和填充不能很好地与％一起使用，并且永远不会出现在相同的元素上

另外，在IE6中，如果给一个元素一个浮点数并且在同一侧有一个填充或边距，它将是你指定的边距/填充的两倍。像这里描述的那样：

http://davidwalsh.name/prevent-double-margin-padding-ie6-css-float

对于IE6，您可以使用边框而不是阴影来获得或多或少相同的外观。

Answer 3

减少边距并定义宽度可以解决问题。

老pss：

#playerNavBox {
        height:36px;
        margin-right: 260px;
        background-color:#fff;
    }

新css：

#playerNavBox {
    height:36px;
    margin-right: 260px;
    background-color:#fff;
    /* ie6 shadow fix */
    *width:81%;
    *margin-right: 250px;
}