史上最全的浏览器兼容性问题和解决方案
浏览器兼容性问题是指因为不同的浏览器对同一段CSS代码解析不同导致页面显示效果不统一的情况。一般情况下，我们希望用户无论使用什么浏览器来查看网页效果都应该是一样的。浏览器的兼容性问题是Web前端开发人员经常会碰到的和必须要解决的问题。下面雷雪松整理出来了史上最全的浏览器兼容性问题和解决方案。
一、浏览器兼容性问题总结
1、双倍浮动边距：
原因：多个并列浮动元素设置了左或右边界值（x），ie6下第一个浮动元素的左或右的边界值为2倍(2x);
解决：为第一个浮动元素添加display:inline;样式；
2、高度不能自适应：
原因：多个并列浮动元素的父级高度不能被撑开。
解决：在最后一个浮动元素后添加<div class=”clear”></div> .clear {clear:both;}
3、上下边界不被识别：
原因：父级元素未指定高度，margin-top和margin-bottom解析错误
解决：在该元素的父一级元素上添加样式：overflow:auto; display:inline-block;
备注：当元素被设置成inline-block时候，最后给该元素指定宽度；
4、IE6不识别微型高度：
原因：IE6不能识别低于当前字高的高度
解决：为该元素设置font-size:0 / overflow:hidden;
5、IE6链接伪类的问题：
原因：IE6不识别P:hover,只能识别a:hover
解决：用a:hover替换之。
6、IE6、7阶梯列表问题：
原因：浮动元素未指定宽度；
解决：为浮动元素指定确定宽度
二、兼容（HACK）技术
1、属性过滤：
[cc lang=”css” escaped=”true”]#nav {
_margin:100px; /*只IE6识别*/
*margin:100px; /*只IE6、IE7识别*/
margin:100px\0/; /*只IE8识别*/
}[/cc]
2、选择器过滤：
[cc lang=”css” escaped=”true”]* html #nav {margin:10px; border:1px #f00 solid;} /*仅IE6识别*/
*+html #nav {margin:100px; border:1px #f00 solid;} /*仅IE7识别*/
/*针对Firefox*/
@-moz-document url-prefix() {
#nav{ width:200px; }
}
/*针对Safari & Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#nav{ width:300px; }
}[/cc]
备注：关于Chrome中文版12号以下的字体不识别，解决方案，设置样式如下：
[cc lang=”css” escaped=”true”]html {-webkit-text-size-adjust:none;}
/*针对Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#nav{ width:400px; }
}[/cc]
3、样式表过滤
[cc lang=”html” escaped=”true”]<!–[if ie 6]> 仅ie6识别的html <![endif]–>
<!–[if lt ie 6]> 小于ie6识别的html <![endif]–>
<!–[if gt ie 6]> 大于ie6识别的html <![endif]–>
<!–[if ie]> 仅ie识别的html <![endif]–>
<!–[if lte ie 6]> 小于等于ie6识别的html <![endif]–>
<!–[if gte ie 6]> 大于等于ie6识别的html <![endif]–>[/cc]
三、注意事项
记得清除漂浮。(在具有float元素的容器底部加入清除漂浮)
漂浮元素尽量给一个确定的宽度。
尽量使用padding代替margin。
若同时有float及margin，加入display:inline。
尽量避免使用绝对定位进行布局；若使用，需明确指定z-index, top, left；
尽量避免使用半透明png图片(PNG-24)；若使用，用PNG修复补丁修复之；
若出现宽度被撑开现象，设置overflow:hidden;
若出现莫名padding，设置font-size:0及overflow:hidden;
四、其他技巧
1、FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2、 居中问题.
a).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
b).水平居中. margin: 0 auto;(当然不是万能)
3、若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5、ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6、作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7、关于手形光标. cursor: pointer. 而hand 只适用于 IE.
2017年3月5日 上午8:53
史上最全的浏览器兼容性问题和解决方案_PHP程序员，雷雪松的博客
2017年3月15日 下午7:18
史上最全的浏览器兼容性问题和解决方案_PHP程序员，雷雪松的博客
hwqeenkyqz http://www.gpuzh582414ql3566n2j549mzmej1n8us.org/
ahwqeenkyqz
[url=http://www.gpuzh582414ql3566n2j549mzmej1n8us.org/]uhwqeenkyqz[/url]
2017年3月15日 下午7:20
史上最全的浏览器兼容性问题和解决方案_PHP程序员，雷雪松的博客
aqdetkykykz
qdetkykykz http://www.g2925ojmff711m9xmw09b6cst1z546z9s.org/
[url=http://www.g2925ojmff711m9xmw09b6cst1z546z9s.org/]uqdetkykykz[/url]
2017年3月15日 下午7:33
史上最全的浏览器兼容性问题和解决方案_PHP程序员，雷雪松的博客
tpzrpgn http://www.gb7xj4dw62klb7392dp70h935dq8q97os.org/
atpzrpgn
[url=http://www.gb7xj4dw62klb7392dp70h935dq8q97os.org/]utpzrpgn[/url]
2017年3月15日 下午7:57
史上最全的浏览器兼容性问题和解决方案_PHP程序员，雷雪松的博客
azevhhroqet
zevhhroqet http://www.g42vos5qz5a7714n4025wsp1hptgx789s.org/
[url=http://www.g42vos5qz5a7714n4025wsp1hptgx789s.org/]uzevhhroqet[/url]
2017年5月28日 上午12:29
http://iapple-wedding.com 台北板橋婚沙
2019年3月9日 下午3:21
XYZ|國中基測|基測|基測歷屆試題|命題光碟|基測中心|基測試題滿1000送200
http://xyz.net.tw/
2019年3月14日 下午11:47
pandora
pandora
锘?a href=”http://www.canada-pandora.ca”>pandora canada
yeezy
pandora eshop
adidas yeezy
yeezy
pandora sito ufficiale
hogan online saldi 70
bracciali pandora
yeezy
pandora
yeezy
yeezy boty
yeezy boost 350
pandora cz
pandora bracelet
hogan outlet online
adidas yeezy boost
pandora jewelry official site
2019年3月26日 上午12:48
yeezy 500 salt
pandora
hogan online saldi 70
yeezy boost 350 v2 sesame
yeezy boost
yeezy
yeezy boost 350 v2
pandora canada
anelli pandora
bracelet pandora
pandora eshop
yeezy 350 static
yeezy 350 hyperspace
yeezy 700 mauve
yeezy
锘?a href=”http://www.canada-pandora.ca”>pandora canada
yeezy boost 350 v2 clay
adidas yeezy
yeezy sesame
yeezy 350 butters
bracciali pandora
yeezy 500 salt
yeezy hyperspace
yeezy 350
pandora rings
bracelet pandora
yeezy boost
yeezy static
pandora jewelry official site
hogan outlet online
yeezy 350
yeezy 700 salt
2019年4月28日 下午6:21
hogan outlet online
yeezy 500 salt
pandora
yeezy boost
bracelet pandora
拧perky pandora
pandora jewelry
yeezy boost 350 v2
yeezy boost
bracciali pandora
boty adidas yeezy
yeezy
yeezy 350 hyperspace
pandora charms
yeezy boost
pandora 70 di sconto
锘?a href=”http://www.canada-pandora.ca”>pandora
yeezy 500 utility black
yeezy 700 wave runner
yeezy hyperspace
yeezy 350 static
yeezy 350 static
yeezy 350 butters
yeezy 350 clay
hogan outlet online
pandora rings
yeezy boost
yeezy boost 350 v2 sesame
bijoux pandora
yeezy 700 static
yeezy boost 350
sesame yeezy
2019年5月9日 下午6:56
写的太经典了，我竟无言以对。