兼容性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了兼容性相关的知识，希望对你有一定的参考价值。
兼容性：hack
1.浏览器兼容：ie:Trident，谷歌:Webkit，火狐:Gecko，
欧朋:Presto，safri
360分为兼容ie内核，急速webkit
2.ie是比较难调的：属性，选择符，注释
比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能-。“-″减号是IE6专有的hack 。_color
只在IE下生效：
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效：
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
解决方案：*{margin:0;padding:0;}
备注：不建议通配符*，css遍历也是有代价的（虽说现代浏览器可以忽略）。可以写全body,p,html,h1,h2,h3...{margin:0;padding:0;}
针对不同浏览器内核的兼容举例：背景色渐变
解决方案：CSS3中-moz、-ms、-webkit和-o分别代表什么意思
1、-moz-：代表FireFox浏览器私有属性
2、-ms-：代表IE浏览器私有属性
3、-webkit-：代表safari、chrome浏览器私有属性
4、-o-：代表opera浏览器私有属性
写法：.gradient{
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); }
reset.css就是兼容各种浏览器。每个浏览器都有私有属性
Ie7-8，ie9+ 分水岭
1.举例: 低版本下响应式媒体查询的实现
解决方法：Respond.js
2.举例：低版本下h5标签、css3标签不识别
解决方法：Html5shiv.js /modernizr.custom.js
具体写法：
<!--[if lt IE9]>
<script src=html5shiv.js"></script>
<script src=respond.js"></script>
<script src=modernizr.custom.js"></script>
<![endif]-->
3.终极解决方案
$(document).ready(function() {
var u=navigator.userAgent.toLocaleLowerCase();
if(u.indexOf("msie 7.0")>-1|| if(u.indexOf("msie 8.0")>-1){
$("body").html("您当前的ie浏览器版本过低,请升级至ie8以上版本或使用其他浏览器");
}
});
4.具体解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if lt IE9]>
<script src=lib/jian/html5shiv.js"></script>
<script src=lib/jian/respond.js"></script>
<script src=lib/jian/modernizr.custom.js"></script>
<![endif]-->
<script src="lib/jquery/jquery-3.1.1.min.js"></script>
<title>兼容性</title>
</head>
<body>
<script>
$(document).ready(function() {
var u=navigator.userAgent.toLocaleLowerCase();
console.log(u);
// if(u.indexOf("msie 7.0")>-1|| if(u.indexOf("msie 8.0")>-1){
// $("body").html("您当前的ie浏览器版本过低,请升级至ie8以上版本或使用其他浏览器");
// }
});
</script>
</body>
</html>
.在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用
2.a标签对里不能嵌套a标签对
3.若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），但如果设置了float属性，就不需要设置display:block。
4.ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.
7.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。
8.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离，这时需要设置display:inline; //使浮动忽略}
9.如何居中一个浮动元素?
对其设置margin:x auto;
以上是关于兼容性的主要内容，如果未能解决你的问题，请参考以下文章