CSS常见兼容性问题怎么解决

这篇文章主要介绍“CSS常见兼容性问题怎么解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS常见兼容性问题怎么解决”文章能帮助大家解决问题。
　　浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。
　　这里谈到的浏览器，主要指IE6/IE7/IE…FireFoxChromeOperaSafari等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争
　　先来谈谈CSSHack
　　我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做CSShack.
　　C免费云主机、域名SShack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。
　　（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。
　　
　　
　　
　　
　　(2)CSS属性前缀法，即是给css的属性添加前缀。比如*可以被IE6/IE7识别，但_只能被IE6识别，IE6-IE10都可以识别”9″，IE6不能识别!importantFireFox不能识别*_9
　　可以先使用“9″标记，将IE分离出来，再用”*”分离出IE6/IE7，最后可以用“_”分离出IE6
　　.type{
　　color:#111;/*all*/
　　color:#2229;/*IE*/
　　*color:#333;/*IE6/IE7*/
　　_color:#444;/*IE6*/
　　}
　　所以可以按着优先级就能给特定的版本捎上特定颜色
　　可以先使用“9″标记，将IE分离出来，再用”*”分离出IE6/IE7，最后可以用“_”分离出IE6
　　.type{
　　color:#111;/*all*/
　　color:#2229;/*IE*/
　　*color:#333;/*IE6/IE7*/
　　_color:#444;/*IE6*/
　　}
　　所以可以按着优先级就能给特定的版本捎上特定颜色
　　为什么说一般呢…你看看下面这个例子，IE6貌似还认得出!important
　　其实也能看出来了，当属性一起写在{}里头时，前者肯定会被后者覆盖。要使!important有效，就应置于多个{}间。
　　h2{color:#f00!important;}
　　h2{color:#000;}
　　h3{color:#f00!important;color:#000;}
　　
　　
　　说明：在标准模式中
　　“-″减号是IE6专有的hack
　　“9″IE6/IE7/IE8/IE9/IE10都生效
　　“″IE8/IE9/IE10都生效，是IE8/9/10的hack
　　“9″只对IE9/IE10生效，是IE9/10的hack
　　（3）选择器前缀法，顾名思义，就是给选择器加上前缀。
　　IE6可识别*p{color:red;}
　　IE7可识别*+p{color:red;}
　　@mediascreen9{…}只对IE6/7生效
　　@mediascreen{body{background:red;}}只对IE8有效
　　@mediascreen,screen9{body{background:blue;}}只对IE6/7/8有效
　　@mediascreen{body{background:green;}}只对IE8/9/10有效
　　@mediascreenand(min-width:0){body{background:gray;}}只对IE9/10有效
　　@mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;}}只对IE10有效等等
　　再来看看主要的兼容问题：
　　（1）最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSSreset.最简单的初始化方法是*{margin:0;padding:0;}但不推荐，而且它也并不完善。
　　贴一个淘宝的样式初始化~
　　body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
　　body,button,input,select,textarea{font:12px/1.5tahoma,arial,5b8b4f53;}
　　h2,h3,h4,h5,h6,h7{font-size:100%;}
　　address,cite,dfn,em,var{font-style:normal;}
　　code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
　　small{font-size:12px;}
　　ul,ol{list-style:none;}
　　a{text-decoration:none;}
　　a:hover{text-decoration:underline;}
　　sup{vertical-align:text-top;}
　　sub{vertical-align:text-bottom;}
　　legend{color:#000;}
　　fieldset,img{border:0;}
　　button,input,select,textarea{font-size:100%;}
　　table{border-collapse:collapse;border-spacing:0;}
　　(2)IE6双边距bug:块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行
　　 　　html,body,div{margin:0;padding:0;}
　　.wrap{width:200px;height:200px;border:1pxsolid#333;}
　　.box{float:left;/*display:inline*/;margin-left:10px;width:80px;height:80px;background-color:green;}
　　
　　
　　
　　 　　

相关推荐: 怎么使用Node.js实现模拟车辆行驶

这篇“怎么使用Node.js实现模拟车辆行驶”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用Node.js实现模拟车辆行驶”文章吧。 一、…