在IE上烦人的CSS问题

Question

网址为：http://site1.ewart.library.ubc.ca/

如果使用FF或其他非IE浏览器，轮播面板如下所示：（3px边框，双重风格）

但是当使用IE 7或8时，我得到了这个:(边框已经消失，左侧大缩略图下面有一个灰色区域）。

轮播面板的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;
}

你能帮忙吗？

谢谢，

Answer 1

我看了你的网站。您正在应用的边框是白色背景。因此，IE将其作为2个3px宽的白线进行插入。这是per the spec。

如果我将颜色更改为红色，我认为它在IE8 +中正常工作。 IE7偏离规范并放置两个1px红色边框填充父框的背景颜色（在这种情况下为白色）.Firefox也偏离规范，因为它没有显示白色边框。

有关IE中双边框的更多问题，另请参阅this KB。此外，this blog post sums up double borders也很不错。

Answer 2

我实际上在IE8中正确看到了双边框。但是，在IE7中，我什么也看不见。

在IE7中，背景颜色不会填充边框区域。所以你看到的是白色背景上的白色双边框。只需将ie7的颜色反转或添加具有正确bg颜色的容器div。我做了一个jsfiddle，你可以看到差异：http://jsfiddle.net/KPvax/1/