浅谈浏览器兼容性问题-(2)本人解决方案理解与积累
前言
接着前一篇吧,我们除了正确看待,还要有一定的解决方案积累。当然,IE没有公开的源代码,所以有很多内容只能是记录,在使用中熟记于心并提前避免。
【HTML/CSS】名(chou)扬(ming)天(yuan)下(bo)的IE6双倍边距问题
思考
网上有很多关于该问题的文章,园子里面也有很多,戳我。这些大多是从“已知问题”的角度去解决,但我们的浏览器不会在发现问题的时候alert一个框告诉你:出现IE6双倍边距BUG啦!正向面对问题时,我们只有现象,出现这个BUG很常见的现象是,在其他浏览器中排版很好的界面,在IE6中有元素被挤下去了。如果出现这个问题,则要考虑这个BUG了,当然,能提前避免会更加好。
解决方案(简略)
display:inline;
_margin:一半的边距;
【HTML/CSS】IE6PNG透明问题
思考
- gif也有透明功能,但只能不透明或者全透明,不能提供基于alpha值的半透明解决方案,而png则能处理,但可恨的IE6并不直接支持png透明。
- 之前有提及到微软有独家的滤镜功能,这里面有相关的解决方案
解决方案
利用AlphaImageLoader
滤镜,先针对其他浏览器正常载入背景,再针对IE6重设背景,相关CSS如下
.pngTransofrm{
background:url(../images/index2q/bg_title.png)no-repeat;
_background:none;/*解决IE6PNG不能透明的问题 */
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/index2q/bg_title.png");/*解决IE6PNG不能透明的问题,注意要相对于HTML文件的png文件的位置 */
}
延伸
- 此方案只针对背景。按照语义化HTML的思考,如果图片只是烘托,那应该用背景,如果该文章想表达的主题就是图片(比如相册)那么应该用img
- 必须针对每一张图片写,滤镜中的路径要相对于HTML文件
- 更多解决方案:戳我
【HTML/CSS】title属性的行为问题
问题及解决方案
这里引用自己当年的一篇文章 http://blog.csdn.net/p2227/article/details/7587641 只检测到IE8下问题比较严重,由于代码是直接从IE8的F12中拷贝的,所以会有点不太规范。
延伸
这是一个很细节的问题,但是前端就是要抓细节,抓用户体验。
【HTML/CSS】文字描边(filter VS CSS3)
思考
很多CSS3中新增的属性,在IE678时代都可以用滤镜去处理,以描边text-shadow
为例,我们可以用glow
滤镜去处理
解决方案
【javascript】逗号处理问题
思考
在IE678下,数组或JSON的最后一个逗号会被解释成undefined,其他浏览器会按W3C标准忽略。
解决方案
本人之前的优化方案中有提及,利用正则表达式,\s*[\r\n][\r\n]\s*\}
在项目源文件中搜索相关代码
【javascript】location跳转与return false
问题及解决方案
在IE6中,<a>
元素如果绑定了DOM事件,并且事件中有跳转,并且href写成javascript:void(0),那么要在事件中return false跳转才会生效。如果href写成#
则不会有这个问题。但是href="#"
本来是用于跳转到网页顶部的,所以javascript:void(0) + dom事件 +跳转的话,要加上return false
才会更加完美。这个问题非常细节,直接上DEMO比较容易说明问题
待续
由于浏览器解释HTML/CSS/Javascript本来就是非常多的内容,一时难以全部整理,待以后还会继续修正添加。
我的计划是要有四篇文章去说明 浅谈浏览器兼容性问题-(3)他山之石整理 浅谈浏览器兼容性问题-(4)工具及调试
参考
http://www.w3cfuns.com/thread-297-1-1.html
http://www.jb51.net/article/26453.htm
http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html