web前端开发浏览器兼容性 - 持续更新

浏览器兼容性问题又被称为网页或网站兼容性问题；不一样浏览器内核及所支持的html等网页语言标准不一样，不一样客户端环境（如分辨率不一样）形成实际显示效果未能达到预期理想效果

首先咱们来看一下目前市面上常见的一些浏览器：ie、chrome、firefox、safari、opera、maxthon、360、qq、yy、uc、sogou、234五、淘宝、猎豹、世界之窗等

其中表现很出色的有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});

有人问，resize时候不行了，你都知道网页resize了你还不知道resize事件捕捉到后怎么办么

 

透明png格式图片的背景问题

浏览器环境：ie6

网页上的糟糕表现为出现了灰背景，缘由是ie6不支持png透明或png8及其以上的alpha透明度；网上的解决办法不少，javascript办法最多但都有通病，自己加载时间与之带来的网页负载，尤为是在网页自己负载就很大或网页上有过多须要处理的png图片的状况，会致使原本性能就很差的ie6浏览器明显停滞甚至崩溃，因此这里咱们推荐的是css与图形处理两种纯自然处理方式，首先来看css滤镜处理

background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");

看上去一切都很美好，就是不能应用于img标签，其次是不能拼图因此也就不支持css sprite；咱们再来看图形处理，使用工具为fireworks而非photoshop（实际上是咱们并不知它怎么实现一样操做），首先为打开的png图片的画布吸收图片四周最相近的背景色

而后打开图像预览，选择gif格式的索引色透明或alpha透明度导出，或选择png8格式的索引色透明导出便可；如今大家应该懂了，楼主不知道photoshop是否能够在图片导出时顺便附带上画布背景色

 

width等百分比值计算时有误

浏览器环境：ie6/7

width:25%;

如刚好有4个该元素充满外部容器，外容器宽度不是恰到好处时实际宽度会溢出，第4个元素会换行，问题的产生是由于ie6/7网页计算自适应处理能力不足；较为稳妥的处理方案是为ie6/7少量减小宽度

width:25%;*width:24%;

 

td内为空时，容器没法占据理想状态下应占据的位置

浏览器环境：ie6/7

<td></td>

页面上表现是该元素和其它同类相比不正常，由于浏览器处理该问题时不够智能；为td插入一个不可见的空格占位符便可

<td>&nbsp;</td>

 

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/7兼容性工做的人愈来愈少，缘由有不少：不少新加入前端开发的同行，直接依托某web前端开发框架，而且在框架自己的兼容性条件下选择回避ie6/7的兼容性工做；而老一辈前端工程师随着我的发展到必定阶段后，有着其它更重要的职能与我的更感兴趣的内容，也不会乐意继续从事该项没有将来的工做；最后一个重中之重的现实问题，长期支持ie6/7对于前端工程师的我的成长来讲的确是一个很不利的因素，毕竟它正处于淘汰进行时，市场占有量愈来愈少而且不少引领互联网行业的媒体也开始接受忽略来自ie6用户的态度