浅谈浏览器兼容解决方案
2017-08-21 本文已影响0人
王翔爱摇滚乐爱电影爱心理学爱哲
一、需要兼容那些浏览器
根据用户群体决定兼容哪些浏览器：
（1）面向普通用户
IE8+，Chrome,Firefox
(2)企业级产品
IE9+，Chrome,Firefox
如何了解浏览器市场份额：
百度统计：http://tongji.baidu.com/data/browser/
二、浏览器兼容方案
1、css层叠原理
div {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
如上面代码所示，同一个属性，后面书写的值会覆盖前面书写的值，并且对于浏览器无效的属性值会被忽略。
2、条件注释
针对IE6，IE7，IE8，IE9的条件注释，见如下代码：
<!--[if lt IE 7]><html class='ie6'><![endif]-->
<!--[if IE 7]><html class='ie7'><![endif]-->
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if (gt IE 9) | !(IE)]><!-->
<html class='W3C'>
<!--<![endif]-->
效果：
（1）chrome下：
Paste_Image.png
（2）IE下（如IE8）：
Paste_Image.png
这样就可以针对不同的浏览器做兼容性处理了，如：
1 .ie8 .selector{
2 /*样式*/
3 }
3、CSS hack
具体示例见如下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>CSS Hack</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.tip {
/*chrome显示blue*/
background: blue;
/*IE8 显示red \9对IE8-6有效*/
background: red\9;
/*IE7 显示black *前缀对IE7、IE6有效*/
*background: black;
/*IE6 显示orange _前缀对IE6有效*/
_background: orange;
}
</style>
</head>
<body>
<div class="tip">
123
</div>
</body>
</html>
