常见浏览器兼容性问题与解决方案css篇
作者：佚名
字体：[ ] 来源：互联网 时间：08-11 17:55:21
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题http://www.jb51.net/css/25565.html
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：
第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。
文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。（相关文章推荐：）
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里&&& *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:将其转化为行内属性
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:后面加入display:display:
备注：行内属性标签，为了设置宽高，我们需要设置display:(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）
浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200 height:auto ! height:200 overflow:}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容CSS设置
做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
/* CSS hack*/ 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置：
height:300*height:200_height:100 IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
大家感兴趣的内容
12345678910
最近更新的内容您当前所在位置： >
> Web后端开发
css解决IE兼容模式问题的方法
大家知道css解决IE兼容模式问题吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。
IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题，于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式：
&metahttp-equiv=&X-UA-Compatible&content=&IE=8&&&!--以IE8模式渲染--&&
&metahttp-equiv=&X-UA-Compatible&content=&IE=7&&&!--以IE7模式渲染--&
相信大家已经学会css解决IE兼容模式问题了吧!感谢大家对我们网站的支持!
相关推荐：
上一篇：下一篇：
本文相关阅读
高校查询分数线
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
地区批次线查询
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
科目理科文科综合其他
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
院校所在地北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
其它中央部委
类型工科农业师范民族
层次本科高职(专科)
高考志愿③部曲
频道热门推荐
栏目最新更新怎么解决这个CSS3浏览器兼容性问题_网页制作吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：94,759贴子：
怎么解决这个CSS3浏览器兼容性问题
css3实现的手风琴效果，不能跟浏览器兼容，无法显示，为什么？请高人指点一下！！！&html&&head&&title&怎么解决这个CSS3浏览器兼容性问题&/title&&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&&script src=&& type=&text/javascript&&&/script&&style&*{margin:0padding:0}bp2, bp4, b#p5 {display:}#accordian {padding:0; margin:0px auto align: list-style: width:963 height:281 overflow: position: border:1px solid #}#accordian li {width:31 height:281 float:-moz-transition: 0.7s;-ms-transition: 0.7s;-o-transition: 0.7s;-webkit-transition: 0.7s;transition: 0.7s;}#accordian div {width:963 height:281 position:}#accordian div span {display:background: rgba(0,0,0,.1);width: 932height: 10position:bottom: 281right: 0;padding: 10color: #000;font: normal 12px/10px &#39;georgia&#39;,border-top: 1px solid #left: 33;}}#accordian li div & a {display:width: 32height: 281float:position:color: #666;text-decoration:box-shadow: -10px 0 10px -10px rgba(0,0,0,0.6);}#accordian li div & a b {display:width: 22padding-left: 20height: 200position:left: -15bottom: 53font: bold 12px/40px &#39;georgia&#39;,text-shadow: margin:30px 0 0 100width:22padding-top:10height:200text-align:line-height:1.2;color: #666666;}#accordian li div & a b {*left:0;}#accordian li img {display: float:}#accordian li.p1 {width:838}#accordian li.p1 div span {bottom:0;}9 border-left:1px solid #}#accordian li a.a2 {background:}f9f; border-left:1px solid #}#accordian li a.a4 {background:# border-left:1px solid #}#accordian li a.a5 {background:#9f9; border-left:1px solid #}#p1:target ~ #accordian li {width:31}#p1:target ~ #accordian li div span {bottom:281}#p1:target ~ #accordian li.p1 {width:838}#p1:target ~ #accordian li.p1 div span {bottom:0;}#p2:target ~ #accordian li {width:31}#p2:target ~ #accordian li div span {bottom:281}#p2:target ~ #accordian li.p2 {width:838}#p2:target ~ #accordian li.p2 div span {bottom:0;}#p3:target ~ #accordian li {width:31}#p3:target ~ #accordian li div span {bottom:281}#p3:target ~ #accordian li.p3 {width:838}#p3:target ~ #accordian li.p3 div span {bottom:0;}#p4:target ~ #accordian li {width:31}#p4:target ~ #accordian li div span {bottom:281}#p4:target ~ #accordian li.p4 {width:838}#p4:target ~ #accordian li.p4 div span {bottom:0;}#p5:target ~ #accordian li {width:31}#p5:target ~ #accordian li div span {bottom:281}#p5:target ~ #accordian li.p5 {width:838}#p5:target ~ #accordian li.p5 div span {bottom:0;}&/style&&/head&&body bgcolor=&#FFFFFF& leftmargin=&0& topmargin=&0& marginwidth=&0& marginheight=&0& onLoad=&MM_preloadImages(&#39;images/index_0902.png&#39;,&#39;images/index_1001.png&#39;,&#39;images/index_1101.png&#39;,&#39;images/index_1201.png&#39;)&&&!-- Save for Web Slices (index.psd) --&&table id=&__01& width=&1431& height=&1239& border=&0& cellpadding=&0& cellspacing=&0&&&tr&&td colspan=&22&&&div id=&info&&&b id=&p1&&&/b&&b id=&p2&&&/b&&b id=&p3&&&/b&&b id=&p4&&&/b&&b id=&p5&&&/b&&ul class=&p3& id=&accordian& name=&accordian&&&li class=&p1&&&div&&a onfocus=glideControl(1) onmouseover=glideControl(1) title=使用介绍 class=&a1& href=&#p1&&&b&使用介绍&/b&&/a&&img src=&/web/images/wall1_s.jpg& alt=&& title=&&&&span&幻灯片一的介绍&/span&&/div&&/li&&li class=&p2&&&div&&a onfocus=glideControl(1) onmouseover=glideControl(1) title=使用介绍 onmouseover=&switchmodTag(&#39;mod&#39;,&#39;slidingList&#39;,&#39;1&#39;);this.blur();& class=&a2& href=&#p2&&&b&使用介绍&/b&&/a&&img src=&/images/wall2.jpg& alt=&& title=&&&&span&幻灯片二的介绍&/span&&/div&&/li&&li class=&p3&&&div&&a onfocus=glideControl(1) onmouseover=glideControl(1) title=使用介绍 class=&a3& href=&#p3&&&b&使用介绍&/b&&/a&&img src=&/images/wall3.jpg& alt=&& title=&&&&span&幻灯片三的介绍&/span&&/div&&/li&&li class=&p4&&&div&&a onfocus=glideControl(1) onmouseover=glideControl(1) title=使用介绍 class=&a4& href=&#p4&&&b&使用介绍&/b&&/a&&img src=&/images/wall4.jpg& alt=&& title=&&&&span&幻灯片三的介绍&/span&&/div&&/li&&li class=&p5&&&div&&a onfocus=glideControl(1) onmouseover=glideControl(1) title=使用介绍 class=&a5& href=&#p5&&&b&使用介绍&/b&&/a&&img src=&/images/wall5.jpg& alt=&& title=&&&&span&幻灯片四的介绍&/span&&/div&&/li&&/ul&&/div&&/td&&/table&&!-- End Save for Web Slices --&&/body&&/html&
一开就崩溃 保存的网站...
#时崎狂三#cn南川 @南川...
如题，重装系统也不行，...
在兼容模式下，只有使用“Quirks ”模式才正常
贴吧热议榜
使用签名档&&
保存至快速回贴css在各个浏览器兼容性问题及解决方案_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
css在各个浏览器兼容性问题及解决方案
上传于||文档简介
&&css在各个浏览器兼容性问题及解决方案
你可能喜欢