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;