首页 > 代码库 > web前端开发的浏览器兼容性
web前端开发的浏览器兼容性
首先我们来看一下目前市面上常见的一些浏览器：ie、chrome、firefox、safari、opera、maxthon、360、qq、yy、uc、sogou、2345、淘宝、猎豹、世界之窗等
其中表现很出色的有chrome、firefox、safari等；而表现极差的就是ie6/7内核浏览器了，我们的兼容性工作大半都是围绕这两个浏览器内核展开
我们的常规处理方式是调试各浏览器网页显示效果、使用成熟的前端开发框架、运用css与hack技巧等
常见hack技巧
css
_：ie6内核浏览器识别
color:#333;_color:#999;*：ie7及其以下内核浏览器识别
color:#333;*color:#999;\：如\9意为ie9及其以下内核浏览器识别
color:#333;color:#999\9;!important：多内核浏览器识别，作用为强制此属性值
color:#333 !important;
html
ie内核浏览器识别
<!--[if IE]><![endif]-->
ie6内核浏览器识别
<!--[if IE 6]><![endif]-->
ie7及其以上内核浏览器识别
<!--[if gte IE 7]><![endif]-->
ie7及其以下内核浏览器识别
<!--[if lte IE 7]><![endif]-->
非ie内核浏览器识别
<!--[if !IE]><![endif]-->
非ie7及其以下内核浏览器识别
<!--[if !(lte IE 7)]><!-->
常见浏览器兼容性问题及解决方案
height低像素值无效
浏览器环境：ie6
height:5px;height高度实际表现为大于5像素，问题产生是因为ie6下容器默认行高的影响；为高度过低元素添加溢出部分隐藏属性即可
height:5px;overflow:hidden;
margin值双倍边距
浏览器环境：ie6
margin:0 10px;float:left;margin左右边距实际表现为20像素，问题一般发生于浮动元素，原因是ie6下浮动元素margin值默认变成双倍；为浮动元素添加行间元素属性即可，优化了同行元素的排版表现
margin:0 10px;display:inline;float:left;或为浮动元素添加ie6专有属性
margin:0 10px;_margin:0 5px;float:left;
max-width、min-width、max-height、min-height等属性无效
浏览器环境：ie6
max-width:1280px;
min-width:980px;
max-height:800px;
min-height:600px;最大最小宽高属性在网页需要它出现时并没有给面子，问题原因是ie6不支持；解决办法是使用expression来实时获取元素当前适合宽高
max-width:1280px;_width:expression(documentElement.clientWidth > 1280 ? "1280px" : "auto");
min-width:980px;_width:expression(documentElement.clientWidth < 980 ? "980px" : "auto");
min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");
min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");
网页实际情况各不相同，各位在根据需求处理具体页面时请自己提好裤子认真测试
fixed属性值无效
浏览器环境：ie6
position:fixed;top:100px;left:10px;预想中的悬挂效果并没有出现，原因很简单ie6根本不支持；我们的解决办法是改变元素的悬挂为定位并使用expression来实时处理元素当前显示位置
position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:10px;expression工作时的表现还是可以接受，唯一的缺点是性能
定位元素上下或左右属性同时赋值时无效
浏览器环境：ie6
position:absolute;top:0;bottom:0;left:0;right:0;画布实际表现为并没有按预想的全屏伸展开，问题产生原因是ie6下上下或左右定位属性同时存在时只识别上与左；为元素赋于宽高属性即可
width:100%;height:100%;position:absolute;top:0;left:0;问题到此并没有得到完全解决，事实上，很多情况下，我们所希望的定位元素的宽高并非正好为100%
position:absolute;top:30px;bottom:50px;left:20px;right:20px;这时css的能力似乎显得捉襟见肘，想拿出一个合适的宽高属性就无从下手了；我们只好通过css与js合作来处理
position:absolute;top:30px;left:20px;var w = $(window).width() - 40;var h = $(window).height() - 80;
$(‘#object‘).css({‘width‘:w,‘height‘:h});
width等百分比值计算时有误
浏览器环境：ie6/7
width:25%;如恰好有4个该元素充满外部容器，外容器宽度不是恰到好处时实际宽度会溢出，第4个元素会换行，问题的产生是因为ie6/7网页计算自适应处理能力不足；较为稳妥的处理方案是为ie6/7少许减少宽度
width:25%;*width:24%;
position属性使用过多或使用位置不恰当引起滚动时页面错乱
浏览器环境：ie7
position:relative;网页上最直接表现就是极具破坏性的滚动错位，问题产生来自ie7自身渲染解析出错；这个问题的解决方案没有具体的代码，尽量避免在过多层级中使用该属性，绝对禁止为无需要无作用元素添加该属性，如tr、td等
容器内纯英文文本过长且无空格等符号时不能自动换行
浏览器环境：多浏览器
<p>abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc</p>
属于极端操作行为，问题来自各浏览器本身，添加2个word属性即可
word-break:break-all;word-wrap:break-word;或者不换行，超出部分显示为更多
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;这2个办法各有优劣，使用时都需根据网页上具体情况而定
元素有margin上边距值且处于最前或下边距值且处于最后，外部容器高度不能自适应
浏览器环境：多浏览器
margin:20px 0 0;外容器并没有按理想状况自适应撑开，从内间隙变成了外间隙，突出表现在外容器有背景色等特征可被明显观察时；根据情况更换元素或外容器的margin为padding
padding:20px 0 0;
老生常谈的清浮动
浏览器环境：多浏览器
问题没什么要描述的直接上解决代码
.clearfix:after{height:0;display:block;content:".";visibility:hidden;clear:both;}.clearfix{zoom:1;}.clear{height:0;overflow:hidden;font-size:0;clear:both;}
如使用清浮动样式的元素处于页面最底部，会给页面底部带来一小段空隙，发生该情况时需及时调整注意避免
悬挂元素工作时表现失常，页面滚动时有明显的停顿抖动
浏览器环境：多浏览器
position:fixed;原本该吸附在页面上的元素并没有令人满意的工作，原因是网页带给浏览器的性能消耗过大如网页上有动画等；从苹果官网偷来的办法是添加一个叫做“隐藏被旋转元素背面”属性，观察结果很有效
position:fixed;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;
图片等元素不能自适应垂直居中
浏览器环境：多浏览器
<p><i><img src="" width="120" height="120" /></i></p>
无需多描述直接上代码，p与img宽高均可任意改动
p{width:800px;height:800px;display:table-cell;text-align:center;vertical-align:middle;}p img{position:static;+position:relative;top:-50%;left:-50%;vertical-align:middle;}p i{position:static;+position:absolute;top:50%;}
一个网站尤其是大型门户网站的兼容性调试是一项很浩大的工程，耗时耗力耗青春，并且还不一定讨好，从事过大项目开发中兼容性调试的同行一定有着和他人不一样的体会，个中滋味实在难以明言
有的网站甚至会对ie6用户额外收取费用，原因是因为这些用户的存在让网站的兼容性工作难度大大提升
很多人以为自己很懂兼容性调试，所谓浏览器兼容性调试也不过如此，随手就可以做出一个全浏览器兼容的网页
仅了解一些常见兼容性方法或做过一些小页面小案例的人，和一个在兼容性问题上沉浸多年并在大型门户级网站开发中支持很久的人在兼容性水平上是不一样的，兼容性出色的前端工程师可以轻松部署自己的代码，从源头上避免很多产生兼容性问题的可能性
现在的国内市场上，能出色完成ie6/7兼容性工作的人越来越少，原因有很多：很多新加入前端开发的同行，直接依托某web前端开发框架，并且在框架本身的兼容性条件下选择回避ie6/7的兼容性工作；而老一辈前端工程师随着个人发展到一定阶段后，有着其它更重要的职能与个人更感兴趣的内容，也不会乐意继续从事该项没有未来的工作；最后一个重中之重的现实问题，长期支持ie6/7对于前端工程师的个人成长来说的确是一个很不利的因素，毕竟它正处于淘汰进行时，市场占有量越来越少并且很多引领互联网行业的媒体也开始接受忽略来自ie6用户的态度
web前端开发的浏览器兼容性