Раздражающие проблемы CSS в IE - PullRequest
Новая
       3

Раздражающие проблемы CSS в IE

0 голосов
/ 06 мая 2011

URL-адрес: http://site1.ewart.library.ubc.ca/

Если использовать FF или другие браузеры без IE, панель карусели выглядит следующим образом: (граница 3 пикселя, в двойном стиле)

enter image description here

Но при использовании IE 7 или 8 я получаю следующее: (граница исчезла, а под левой стороной имеется большая миниатюра большого пальца).

enter image description here

CSS для панели карусели: 

#webcastingslideshow { 
margin: 25px 30px 20px 35px; 
z-index:1;
background:#3c3c3c;
border:double 3px #fff;
}

CSS для большого эскиза левой стороны: 

#webcastingslideshow .largethumbnail {
display:block;
height:240px;
width:320px;
background:#000;
float:left;
}

Не могли бы вы помочь?

Спасибо,

Ответы [ 2 ]

2 голосов
/ 06 мая 2011

Я посмотрел на вашем сайте.Граница, которую вы применяете, белая на белом фоне.Таким образом, IE выводит это как 2 белые линии шириной 3 пикселя.Это согласно спецификации .

Если я изменю цвет на красный, я вижу, что он работает правильно в IE8 +.IE7 отклоняется от спецификации и размещает две красные границы размером 1px, заполненные цветом фона родительского блока (в данном случае белым). Firefox также отклоняется от спецификации, поскольку не отображает белые границы.

См. Также это KB , чтобы узнать больше о двойных границах в IE.Кроме того, это сообщение в блоге суммирует двойные границы тоже довольно хорошо.

1 голос
/ 06 мая 2011

Я действительно правильно вижу двойную границу в IE8. Однако в IE7 я ничего не вижу.

В IE7 цвет фона не заполняет область границы. Итак, вы видите белую двойную рамку поверх белого фона. Просто инвертируйте цвета для ie7 или добавьте контейнерный контейнер с правильным цветом bg. Я сделал jsfiddle, чтобы вы могли увидеть разницу: http://jsfiddle.net/KPvax/1/

...