恼人的CSS问题在IE [英] Annoying CSS issues on IE

问题描述

网址为：。

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

有关与IE中的双边框相关的更多问题，另请参见此知识库。此外，此博客文章总结了双边框也很不错。

The URL is: http://site1.ewart.library.ubc.ca/

IF using FF or other none IE browsers, the carousel panel looks like this: (3px border, in double style)

But when using IE 7 or 8, I get this: (border is gone and there is a gray area below the left side large thumbnail).

CSS for the carousel panel is:

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

CSS for the left side large thumbnail is:

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

Could you please help?

Thanks,

解决方案

I looked at your site. The border you are applying is white against a white background. Thus, IE is interputting this as 2 white lines 3px wide. This is per the spec.

If I change the color to red, I see it work properly in IE8+. IE7 deviates from the spec and places two 1px red borders filled with the background color of the parent box (white in this case).Firefox is also deviating from the spec because it is not displaying white borders.

See also this KB for more issues related to double borders in IE. Also, this blog post sums up double borders pretty good too.

这篇关于恼人的CSS问题在IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！