CSS/HTML - Internet Explorer 8的问题（边框半径，图片封面和填充）

我在Internet Explorer中查看我的网站时遇到问题。在下面的CSS/HTML中，应该将图像绘制为轮廓，曲面半径并缩放以适合。但IE 8不会缩放图像，弯曲角落，也不会显示轮廓。这里是jsfiddle：http://jsfiddle.net/pave4/这个页面在最新的IE（IE8）中很好，但我需要确保它也适用于旧版本的IE。CSS/HTML - Internet Explorer 8的问题（边框半径，图片封面和填充）

HTML：

<ul> 
<li> 
    <a href="/aboutme/"> 
    <span class="img-outline"><span class="page-img" id="aboutme"></span></span> 
    <span class="page-title">About Me</span> 
    </a> 
</li> 
</ul>

CSS：

.page-title { 
     text-align: center; 
     display:block; 
     text-decoration: none; 
} 

.img-outline { 
    height: 100%; 
    background: rgba(0, 0, 0, .3); 
    padding: 5px; 

    display: block; 
    margin-left: auto; 
    margin-right: auto; 

    -webkit-border-radius: 18%; 
    -moz-border-radius: 18%; 
    border-radius: 18%; 
} 

.page-img { 
    height: 100%; 
    background: rgba(50, 50, 50, 1); 
    background-size:115px 115px; 
    background-repeat:no-repeat; 

    display: block; 
    margin-left: auto; 
    margin-right: auto; 

    -webkit-border-radius: 15%; 
    -moz-border-radius: 15%; 
    border-radius: 15%; 
} 

li, 
li.current, 
li.current:visited { 
    margin-left: 1px; 
    margin-right: 1px; 
    width: 118px; 
    height: 112px; 
    display: block; 
    float: left; 
    position: relative; 
    opacity: .6; 
} 

li:hover { opacity: 1; } 

li .img-outline { 
    width: 70px; 
    height: 70px; 
} 

li .page-img { 
    background-size:70px 70px; 
} 

li #aboutme { 
    background-color: rgb(36, 112, 245); 
    background-image: url('http://www.rasnickjewelry.com/images/uploads/900_Animals_300/901_Elephant_Head_Ring_side_R300.jpg'); 
}

来源

2012-07-25 michaellindahl

IE的某些版本不支持[边界半径]的感觉（http://www.caniuse.com/ ＃search = border-radius），[background-size]（http://www.caniuse.com/#search=background-size）或[十六进制表示以外的颜色]（http://www.caniuse.com/ ＃搜索= RGBA）。 – 2012-07-25 23:15:57

你知道为什么img-outline不起作用吗？ – michaellindahl 2012-07-27 02:17:36

您使用大量CSS3属性是IE8不支持我害怕。

来源

2012-07-25 23:13:03

创建“不兼容的浏览器”启动页面是解决此限制的一种方法。大多数现代浏览器允许您在用于css3支持的任何后端语言中进行查询。另外，您可以尝试围绕边框半径，背景大小以及与图像的其他不兼容性工作。 – lassombra 2012-07-25 23:19:11

不要调整图像样式上传他们在确切的大小，这将节省您的加载时间。

关于其他syles类似圆角半径尝试使用这个工具http://css3pie.com/

来源

2012-07-25 23:23:01

我在子页上使用70x70图像，但在主页上使用250x250图像，不考虑IE不兼容性，使用一张250x250图像还是250x250图像和70x70图像会更好？ – michaellindahl 2012-07-27 02:23:36

绝对是两张图片，是雅虎最好的不缩放图片的最佳实践之一。 [链接]（http://developer.yahoo.com/performance/rules.html#no_scale） – 2012-07-27 14:18:53

正如我在我的评论说你原来的问题，即，高达8不支持RGBA颜色。由于您不使用Alpha通道，因此请使用background-color: #323232;。

IE8也不支持标准opacity属性，您需要filter: alpha(opacity=60);而不是（percantage值sans％）。相关的可能是IE中的元素需要layout才能正确呈现：有大量文章涉及这个主题。好的是On Having Layout。

为了获得所CSS属性和功能都支持利用资源，如When Can I Use或Quirksmode

来源

2012-07-27 08:49:17

CSS/HTML - Internet Explorer 8的问题（边框半径，图片封面和填充）

回答

相关问题