ie8中遇到的兼容問題以及解決方案
一.CSS3
1.可以通過在css中引入pie.htc,處理兼容問題(可處理的屬性)
-webkit-box-shadow: 0 1px 5px #ff2826;
-webkit-border-radius: 4px;等
最后在該樣式中引入pie.htc
例子:.index-tab li a:hover{
? ? box-shadow: 0 5px 20px #aeaeae;
? -webkit-box-shadow: 0 5px 20px #aeaeae;
? ? behavior: url(PIE.htc);
}
2.ie8不支持nth-child,但支持first-child,可以通過轉(zhuǎn)化寫法來處理問題,span:nth-child(2)可以轉(zhuǎn)寫為span:first-child+span,可以使ie8顯示該內(nèi)容
3.ie8對background的各個屬性兼容性不良好
解決辦法:
rgba(0,0,0,)黑色透明度--------background: rgba(255,255,255,.8)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c8000000,endColorstr=#c8000000);
rgba(255,255,255,)白色透明度--------background: rgba(255,255,255,.8)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c8ffffff,endColorstr=#c8ffffff);
附上不同透明度對照表:
4.ie對c3很多屬性都不支持,等后期具體補(bǔ)充
例如:background-position/background-size/多重背景設(shè)置等
5.解決ie8 select下拉按鈕換新圖片問題(略有缺陷下拉框子元素任然為父元素大小overflow沒辦法隱藏,優(yōu)雅降級)
? 給select的添加父盒子,父元素設(shè)置overflow:hidden;
? 參考文檔:http://ourjs.com/detail/551b9b0529c8d81960000007
? 附加:ie8 select文字垂直不居中,設(shè)置padding:8px 0;
二茅姜、
#box{
color:red; /* 所有瀏覽器都支持 */
color:red !important;/* Firefox濒析、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6返帕、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7简识、IE8支持 */
color:red\0; /* IE8支持 */
}
