Html Css/css3相容性總結(相容主流瀏覽器包括Ie6)
1. 360以極速模式開啟網頁:
預設用急速核心,增加標籤: <meta name="renderer" content="webkit">預設用ie相容核心,增加標籤:<meta name="renderer" content="ie-comp">
預設用ie標準核心,增加標籤:<meta name="renderer" content="ie-stand">
2. CSS3選擇器 :nth-child(2n)相容性
解決:ie8及以下
.list li:nth-child(4n){margin-right:0;}
//這樣直接寫只有在支援CSS3的瀏覽器中才可正常顯示。
$(document).ready(function(){
$(".list li:nth-child(4n)").css("margin-right","0");
});
用jquery這樣寫,在IE瀏覽器中就會很好的顯示了。
3. display:inline-block; 相容性
解決:ie6/7 { *display:inline;*zoom:1; }
4. CSS3選擇器 :first-child | :last-child相容性
解決:ie6/7
margin-right:10px; *margin-right: expression(this.nextSibling==null?"0":"6px"); //last-child
margin-right:10px; *margin-right: expression(this.previousSibling==null?"0":"6px"); //first-child
5. Safari Hack 之line-height 相容性
解決:文字上移
[;line-height:1;] 真有用! //safari
或者
line-height:26px; line-height:1 !important;
*line-height:26px; //IE6
+line-height:26px; //IE7
line-height:26px\0; //IE8
6. IE8 select相容
解決:文字下沉
height:28px; line-height:20px; padding:4px; //通過padding值
7. 去掉焦點線 { *:focus {noFocusLine: expression(this.onFocus=this.blur());}
8. IE6下,DIV表格外邊無邊線?
解決:從內部補進去。
.orderList-con{ border:1px solid #c9c9ca; margin-bottom:37px; }
.orderHistory-hd{ background:#dbebc6; *border-left: ;*border-right:;*border-top:; }
.orderHistory-bd{ *border-left: ;*border-right:;*border-top:; }
9. IE6下,margin-top負值相容(被切頭)
解決:加上position:relative即可
.tit{ margin-top:-20px; font-size:36px; text-align:center; position:relative }
10.IE6下,min-width相容
解決:min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );
11、IE6,7下 input自適應寬相容
解決:width:auto;
overflow:visible; //剪下為影象大小
12.如何去掉圖片下面白色Bug?
解決: img{ display:block; 或vertical-align: top; }
或float 都行
13. 去除inline-block元素間間距
解決:
/*IE6/7瀏覽器有時候會有1畫素的間距*/
.abc{
height: 100px;
font-size: 0;-webkit-text-size-adjust:none;
}
a{
display: inline-block;*display: inline;*zoom: 1;
font-size: 12px;padding: 10px;background: #c00;color: #fff;
}
14.蘋果移動端input有內陰影,如何去除?
解決:
{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
15.網頁相容檢視
其他瀏覽器正常,IE11勾選相容檢視模式樣式顯示有差別?
解決:● 先檢查是不是Html寫的不規範;
● 否則就是缺IE6 hack,例如*bottom:20px;
16.清除滾動條(包括h5瀏覽器預設樣式)
::-webkit-scrollbar{width:10px;background-color:#fff}
::-webkit-scrollbar-thumb{background-color:#fff;border-radius:10px;border:2px solid #fff;}
::-webkit-scrollbar-thumb:hover{background-color:#fff;}
::-webkit-scrollbar-thumb:active{border:0;border-radius:0;background-color:#fff}
::-webkit-scrollbar-thumb:window-inactive{background-color:#fff}