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的問題（邊框半徑，圖片封面和填充）

回答

相關問題