CSS常见兼容性问题怎么解决
这篇文章主要介绍“CSS常见兼容性问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS常见兼容性问题怎么解决”文章能帮助大家解决问题。
创新互联是一家专注于网站建设、成都网站设计与策划设计,上街网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:上街等地区。上街做网站价格咨询:18982081108
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。
这里谈到的浏览器,主要指IE6/IE7/IE...FireFoxChromeOperaSafari等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争
先来谈谈CSSHack
我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做CSShack.
CSShack主要有三种: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:#222\9;/*IE*/
*color:#333;/*IE6/IE7*/
_color:#444;/*IE6*/
}
所以可以按着优先级就能给特定的版本捎上特定颜色
可以先使用“\9"标记,将IE分离出来,再用”*"分离出IE6/IE7,最后可以用“_”分离出IE6
.type{
color:#111;/*all*/
color:#222\9;/*IE*/
*color:#333;/*IE6/IE7*/
_color:#444;/*IE6*/
}
所以可以按着优先级就能给特定的版本捎上特定颜色
为什么说一般呢...你看看下面这个例子,IE6貌似还认得出!important
其实也能看出来了,当属性一起写在{}里头时,前者肯定会被后者覆盖。要使!important有效,就应置于多个{}间。
h2{color:#f00!important;}
h2{color:#000;}
h3{color:#f00!important;color:#000;}
test1
test2
说明:在标准模式中
“-″减号是IE6专有的hack
“\9″IE6/IE7/IE8/IE9/IE10都生效
“\0″IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″只对IE9/IE10生效,是IE9/10的hack
(3)选择器前缀法,顾名思义,就是给选择器加上前缀。
IE6可识别*p{color:red;}
IE7可识别*+p{color:red;}
@mediascreen\9{...}只对IE6/7生效
@media\0screen{body{background:red;}}只对IE8有效
@media\0screen\,screen\9{body{background:blue;}}只对IE6/7/8有效
@mediascreen\0{body{background:green;}}只对IE8/9/10有效
@mediascreenand(min-width:0\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,\5b8b\4f53;}
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;}
解决的方式有两个:
1.给float元素添加display:inline即可正常显示
2.就是hack处理了,对IE6进行_margin-left:5px;
(3)跟上述差不多,也属于IE6双边距bug:行内属性标签,为了设置宽高,我们经常就会设置成display:block;这样一来就产生上述的问题。
解决办法也是天津display:inline;但是这样一来我们就不能设置宽高了,所以呢需要再加个display:table.
所以你设置display:block后,再添上display:inline和display:table
(4)上下margin重合问题,相邻的两个pmargin-leftmargin-right不会重合,但相邻的margin-topmargin-bottom会重合。
.box1{width:200px;height:200px;border:1pxsolid#333;}
.mt{margin-top:10px;}
.mb{margin-bottom:10px;}