ie6陰影問題

Question

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

我在盒子上有陰影，使div移到新行，如果我除去陰影，div會回到同一行。 以下是屏幕截圖。

ie6陰影斷線錯誤- 全圖 ：

ie6沒有陰影（這只是為了顯示沒有陰影后的樣子，但是我們確實需要陰影）- 全圖 ：

最終布局應如下所示。 此屏幕截圖來自firefox- 完整圖片 ：

以下是導致問題的行，我不知道如何解決：

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無法將自身定位在左邊的div旁邊。 給左邊一個浮點數，並以px或％為單位固定寬度，並且都應該沒問題。

如果您的布局是流暢的：請注意，以px為單位的邊框，陰影，邊距和內邊距不能很好地與％配合使用，並且永遠不要位於同一元素上

另外，在IE6中，如果給元素一個浮點數，而在同一側上給其填充或邊距，則它將是您指定的邊距/填充的兩倍。 如此處所述：

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

對於IE6，您可以使用邊框而不是陰影來獲得大致相同的外觀。

Answer 3

減少邊距並定義寬度可以解決此問題。

舊的CSS：

#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;
}