web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题;不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果
首先我们来看一下目前市面上常见的一些浏览器: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});
有人问,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> </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用户的态度
web前端开发浏览器兼容性 - 持续更新的更多相关文章
- web前端开发随手笔记 - 持续更新
本文仅为个人常用代码整理,供自己日常查阅 html 浏览器内核 <!--[if IE]><![endif]--> <!--[if IE 6]><![endif ...
- web前端开发浏览器兼容性处理大全
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- web前端开发中的浏览器兼容性总结
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- asp.net web系统开发浏览器和前端工具
1. Firefox浏览器+firebug插件 下载安装Firefox浏览器后,在菜单-附加组件-扩展中,搜索firebug,下载长得像甲虫一样的安装. 在web调试中,直接点击右上角的虫子,即可调出 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
- 上海洋码头(www.ymatou.com)急招技术人才(职位:互联网软件开发工程师,.NET网站架构师,Web前端开发工程师,高级测试工程师,产品经理)
对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师 岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...
- iOS客户端开发与Web前端开发
转载自:http://blog.cnbang.net/tech/1813/不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 版本升级.用户角度上看,客 ...
随机推荐
- hexo 适合前端 geek 的博客
原文出自:http://www.qiangji.tk/hexo%E9%80%82%E5%90%88%E5%89%8D%E7%AB%AFgeek%E7%9A%84%E5%8D%9A%E5%AE%A2/ ...
- http server v0.1_http_parse.c
#include <stdio.h> #include <string.h> #include <stdlib.h> #include "mime.h&q ...
- Android SectionIndexer 的使用(联系人分类索引)
// 获取标题栏索引 int position = sectionIndexter.getPositionForSection(l[idx]); ) { return true; } // 设置调整到 ...
- VC6.0 list sort出错
在STL中,排序是个很重要的话题. 1.algorithm 里的sort()只接收RandomAccessIterator用于像vector,dequeue的排序 2.像set,map,这种关联式容器 ...
- bzoj1576 3694
两道题目本质是一样的bzoj1576我们先要用dij+heap处理出最短路径树和起点到每个点的最短路径而bzoj3694已经给出了最短路径树,所以直接dfs即可题目要求的是不走起点到每个点最短路径上的 ...
- Kafka Topic Partition Replica Assignment实现原理及资源隔离方案
本文共分为三个部分: Kafka Topic创建方式 Kafka Topic Partitions Assignment实现原理 Kafka资源隔离方案 1. Kafka Topic创建方式 ...
- C#中的四舍五入算法
最近在产品开发过程中遇到一个问题,就是在对数值进行截取,例如说保留两位小数时,最终得到的结果跟预期的在某些情况下会产生差异,这个差异的表现就是最后一位与预期的不一致,也就是说在"四舍五入&q ...
- typedef用法小结
typedef用法小结- - 注意:本文转自网络,版权归原作者所有. typedef typedef用法小结- - 这两天在看程序的时候,发现很多地方都用到typedef,在结构体定义,还有一些数组等 ...
- EasyWebServer编写CGI程序的环境变量
示例: SERVER_SOFTWARE=EasyWebServer/1.9 SERVER_PROTOCOL=HTTP/1.1 SERVER_PORT= SERVER_NAME=aozima-noteb ...
- php 文本框里面显示数据库调出来的资料
php 文本框里面显示数据库调出来的资料,,,在里面我标注了,,那个地方为什么是!=才能显示正确的数据库资料啊?我理解的是对比正确输出数据库内容的.大师貌似不知道为什么就写错了 <html> ...