ie6 теневая проблема

Question

Демо: http://jsbin.com/esupex/2

У меня есть тень на коробке, и это заставляет div перейти на новую строку, и если я удаляю тень, div возвращается на ту же строку. Ниже приведены скриншоты.

ie6 ошибка разрыва теней - полное изображение :

ie6 без тени (это просто для того, чтобы показать, как она выглядит без тени, но нам нужна тень) - full image :

Окончательный макет должен выглядеть следующим образом. этот скриншот из 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

уменьшение поля и определение ширины устраняет проблему.

старый 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;
}

Answer 3

Вы работаете с фиксированным или текучим макетом?Проблема в том, что самый правый div не может располагаться рядом с левым.Дайте левому плавать влево и установите фиксированную ширину в пикселях или%, и все должно быть в порядке.

Если ваш макет изменчив: обратите внимание, что границы, тени, поля и отступы в пикселях плохо сочетаются с% и никогда не должны быть на одних и тех же элементах

Кроме того, в IE6, если выприсвойте элементу float и на той же стороне отступ или отступ, он будет вдвое больше указанного вами отступа / отступа.как описано здесь:

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

Для IE6 вы можете использовать границу вместо тени, чтобы получить более или менее похожий вид.