浅谈浏览器兼容性问题-(3)他山之石整理

浅谈浏览器兼容性问题-(3)他山之石整理

前言

我们除了在自己的实际项目中总结遇到的兼容性问题,还要通过网络及其他途径收集,以拓宽自己的视野思路。网络上的方案可以分为两类,一类针对某个点,解决一个常见的BUG;另外一类针对方法,解决特定版本下浏览器的问题

举例

  • margin及padding在各浏览器下不一致的问题,解决方法一般是*{margin:0;padding:0;},在aliceui中是
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  2. margin:0;padding:0;
  3. }

这个问题其实很常见,如果是从切片等基础开始做起,并且对位置定位敏感度高的人一般都会发现。当然第一个解决方法其实在很多项目或者框架的CSS首先会包含,所以较容易会忘记。

  • 手势鼠标cursor及pointer的问题,统一用pointer
  • DOCTYPE 统一都加上,推荐用HTML5的DocType
  • document.all等非标准方法,都用w3c统一的getElementById等方法
  • 事件问题,另外写一个判断的函数,另外参数注意 window.event || e
  • IE6的fixed 代码较多,戳我
  • 其他,很多。戳我 戳我 戳我

点的集合

现成的兼容性解决方案,如alice,针对bootstrap的bsie

方法

css hack

即针对不同浏览器的识别特点,对CSS属性加上特别的符号以让不同浏览器表现有所区别。代码:

  1. .myDiv{
  2. background: #000; /* IE9+/chrome/FF 黑色 */
  3. background: #ff0000\0; /* IE8 红色 */
  4. +background: #00ff00; /* IE7 蓝色 */
  5. _background: #0000ff; /* IE6 绿色 */
  6. }

个人意见,其实之前也有提及,html/css应该以w3c标准为基准去设计开发,这种网页在IE9+/chrome/FF下基本一致,一般IE678才需要特别配置。其他的css hack还有很多,不举例了,戳我即可

前缀

各浏览器在推出自己特有属性但未被收录到w3c标准时,会用自己的特有前缀去区分,常见前缀如下

前缀 适用浏览器
-ms- 微软IE系列
-moz- Mozilla FireFox
-o-,-xv- Opera系列
-webkit- webkit内核如Safari、Safari on iOS、Chrome、Android浏览器

更多用法戳我

条件注释

IE特有的东西,能针对不同的浏览器显示特定的(X)HTML结构,针对结构是本方法最大的特点,如果要实现针对不同浏览器显示不同的HTML结构,例如IE6就显示升级提示,用此方法处理最好。支持gt(大于)lt(小于)gte(大于等于)lte(小于等于)!(非操作)及精确到小数点后四位的版本号区分。具体使用方法戳我戳我

User-Agent

这个更加多是用于javascript里面判断,其实本人不推荐使用,此处仅为了罗列。

态度

嗯,我们有各种的方法去针对浏览器版本写不同的兼容性方案,但我们应该尽可能少用以上技巧,再重申一次吧html/css应该以w3c标准为基准去设计开发,确实是浏览器的BUG才用到处理BUG的方法。另外,针对javascript的区别推荐用 鸭式辨型 (Duck typing)的原则去判断。(其实CSS HTML也 有,不过js会更加常见)会飞,像鸭子一样走路并且嘎嘎叫的,就当作是鸭子了,此方法不仅能处理各种外壳浏览器,也能适应未来的浏览器。

参考

http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html

http://baike.baidu.com/link?url=e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWq

http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html

http://en.wikipedia.org/wiki/Duck_typing

posted @   p2227  阅读(1308)  评论(3编辑  收藏  举报
点击右上角即可分享
微信分享提示