浅谈浏览器兼容性问题-（2）本人解决方案理解与积累

#浅谈浏览器兼容性问题-（2）本人解决方案理解与积累

##前言
 接着[前一篇](http://www.cnblogs.com/p2227/p/3593087.html)吧，我们除了正确看待，还要有一定的解决方案积累。当然，IE没有公开的源代码，所以有很多内容只能是记录，在使用中熟记于心并提前避免。

##【HTML/CSS】名(chou)扬(ming)天(yuan)下(bo)的IE6双倍边距问题
###思考
网上有很多关于该问题的文章，园子里面也有很多，[戳我](http://www.cnblogs.com/YAOXI/articles/1691265.html)。这些大多是从“已知问题”的角度去解决，但我们的浏览器不会在发现问题的时候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文件的位置 */
}
```

[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/IE6PNG/)
###延伸

* 此方案只针对背景。按照语义化HTML的思考，如果图片只是烘托，那应该用背景，如果该文章想表达的主题就是图片（比如相册）那么应该用img
* 必须针对每一张图片写，滤镜中的路径要相对于HTML文件
* 更多解决方案：[戳我](http://www.w3cfuns.com/thread-297-1-1.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`滤镜去处理

###解决方案
[戳我](http://gh.p2227.com/demo/BrowserCompatibility/glow/)


##【javascript】逗号处理问题
###思考
在IE678下，数组或JSON的最后一个逗号会被解释成undefined，其他浏览器会按W3C标准忽略。
###解决方案
本人之前的[优化方案](http://www.cnblogs.com/p2227/p/3541162.html)中有提及，利用正则表达式`,\s*[\r\n][\r\n]\s*\} `在项目源文件中搜索相关代码

[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/JSONComma/)



## 【javascript】location跳转与return false 
###问题及解决方案
在IE6中，``元素如果绑定了DOM事件，并且事件中有跳转，并且href写成javascript:void(0)，那么要在事件中return false跳转才会生效。如果href写成`#`则不会有这个问题。但是`href="#"`本来是用于跳转到网页顶部的，所以**javascript:void(0) + dom事件 +跳转**的话，要加上`return false`才会更加完美。这个问题非常细节，直接上[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/IE6Location/)比较容易说明问题


## 待续
由于浏览器解释HTML/CSS/Javascript本来就是非常多的内容，一时难以全部整理，待以后还会继续修正添加。

我的计划是要有四篇文章去说明
浅谈浏览器兼容性问题-（3）他山之石整理
浅谈浏览器兼容性问题-（4）工具及调试

##参考
http://www.w3cfuns.com/thread-297-1-1.html

http://www.jb51.net/article/26453.htm

http://wenku.baidu.com/link?url=Usfi_LRVUz9JxgcMqazT4yre8OJOCYD9dhFhHpSlPqEEAYyAEr_knIS6Na93CjBSd85-o0YH9RjacgIAteBNd2SSUQus_cNKNCORCRoEtb3

http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html

浅谈浏览器兼容性问题-（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文件的位置 */
}

DEMO

延伸

• 此方案只针对背景。按照语义化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*\}在项目源文件中搜索相关代码

DEMO

【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://wenku.baidu.com/link?url=Usfi_LRVUz9JxgcMqazT4yre8OJOCYD9dhFhHpSlPqEEAYyAEr_knIS6Na93CjBSd85-o0YH9RjacgIAteBNd2SSUQus_cNKNCORCRoEtb3

http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html