ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察(译自http://www.sitepoint.com/)中的10个修复ie6下bug技巧:
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE,并且我们推荐使用strict 版本,比如:

<!DOCTYPE   HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者,对于XHTML使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。
2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。显然,你需要非常小心点儿,因为绝对定位的子节点可能会因此重新定位。
3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,尽管这不是必须的,你的CSS仍然是有效的。
4. 将一个元素设置为hasLayout
很 多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设 置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。
最简单的设置 hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。我们推荐设置实际尺寸,但是问题是 这是不现实的,你可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候hasLayout已经被启 用。
5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
         .确保所有的元素使用”display:inline;”
         .在最后一个元素上使用一个”margin-right:-3px;”
         .为浮动元素的最后一个条目使用一个条件注释,比如:

<!--[if !IE]>Put your commentary in here...<![endif]-->

         .在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。
>>>>>>你还可以访问positioniseverything.net 查看该问题的完整介绍。
6. 在可点击和悬停的元素上只使用<a>标签
IE6只认识对a标签的CSS hover效果。
你也可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是<a>标签比其它方案更可靠。
7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:

#element {
     min-height: 20em;
     height: auto !important; /* 所有浏览器都理解这段代码 */
     height: 20em; /* IE6 错误的使用这个值 /*
}

IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。
另外一个可选的方法是使用高级选择器,比如e.g.

#element {
     min-height: 20em;
     height: 20em;
}
/* IE6 无视下面的代码*/
#element[id] {
     height: auto;
}

8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小,才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比,比如:

body {
     margin: 2% 0 !important;
     margin: 20px 0; /* IE6 only */
}

9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕,而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行,那么一般在其它浏览器就不会有问题。
10. 重构你的代码
经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码,但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

转载于:https://www.cnblogs.com/aaa6818162/archive/2009/11/06/1597163.html

10个修复ie6下bug技巧[转]相关推荐

  1. 十个修复IE6下bug技巧

    IE6的末日即将来临,但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避IE6下双边距,背景透明,重复文字等等一堆bug. 10个修复IE6下bug技巧 IE6的末日即将 ...

  2. E6终极备忘:修复IE6下_25+_Bugs

    E6终极备忘:修复IE6下_25+_Bugs 引言:"珍惜生命,远离IE 6!"       对IE6最好的策略就是不去兼容它. 好吧,我知道你的难处,你不得不去兼容IE6这个狗血 ...

  3. html+css技巧分享和IE6典型BUG分析(重温一下)

    上个星期六,给公司的一些童鞋,做了一次分享, 分享的主题是HTMl+css开发技巧 为此一个星期都没有怎么做项目,准备了一个3dppt,也就是impress.js插件, 每种类型也做了一个例子,, 讲 ...

  4. [转]IE6下的CSS BUG枚举

    原文链接:http://luinlee.com/405/ie6csschinese/ 1.终极方法:条件注释.缺点是在IE浏览器下可能会增加额外的HTTP请求数. 代码 <!–[if lte I ...

  5. ie6下常见的bug 调整页面兼容性

    ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...

  6. IE6下css常见bug处理

    1.双倍边距 如下图所示,一个样式里面既设定了"float:left:"又有"margin-left:100px:"的情况,就呈现了双倍情况.如外边距设置为10 ...

  7. [转]ie6下CSS存在的BUG

    A 双倍MARGIN 設置float的位于行首的元素[如div, ul中的li等],使用margin后,横向margin值会加倍 div { float:left; margin-left:10px; ...

  8. CSS在IE6下的一些BUG和兼容性问题及解决办法

    兼容性一直是前端的一大问题,也是让前端工程师很头痛的事情,在浏览器中,各厂商都有一套属于自己的标准和方法,从某种程度上看,是否能很好的处理兼容性问题,体现着一个前端工程师的水平,下面看一下CSS在IE ...

  9. ie6下padding bug

    今晚发现ie6下原来还有一个bug,看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

最新文章

  1. Blender三维建模和动画风格化的东方场景视频教程
  2. 学习BeetlSQL总结(2)——查询API,更新API
  3. “战狼”无人直升机完成高原靶试
  4. 关于C#值类型,引用类型,值传递,引用传递
  5. 判断一个where条件的对错php,sql – IN子查询的WHERE条件影响主查询 – 这是一个功能还是一个错误?...
  6. LINQ-to-SQL那点事~关于延时加载的性能,微软给出了不错的解决方案
  7. 微信“支付”页全国多地上线“出行服务”,已覆盖108城
  8. java中的switch的规则_细细讲述Java技术开发的那些不为人知的规则
  9. 【转】编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程
  10. javascript中的正则表达式学习
  11. RHEL5中配置vsftpd搭建FTP服务器
  12. SQL Server 查询哪些对象(表\视图\存储过程)包含有某些内容
  13. NASA数据批量下载——wget
  14. mongodb WT_ERROR: non-specific WiredTiger error
  15. mmdetection config文件中几个参数的理解(anchor_scales,anchor_ratios,anchor_strides)
  16. mysql网络数据库操作模块_15.mysql数据库操作与Paramiko模块
  17. 成都敏之澳:拼多多关键词选词关键要素是什么?
  18. 极客日报第127期:华为最新人事调整:余承东任智能汽车解决方案 BU CEO;美团悄悄更换抽佣规则,佣金不降反升;Scala 3 正式发布
  19. 武音官网服务器不稳定,@所有武音er | 恭喜你获得一张教育网WiFi“国际通行证”...
  20. [乡土民间故事_徐苟三传奇]第卅三回_考学问哄走夺馆人

热门文章

  1. 集合类ArrayList、HashMap、HashSet线程不安全
  2. LR录制脚本后,中文显示的是乱码,怎么解决?
  3. 快速清理Exchange 2003中的SMTP队列
  4. js语法、关键保留字、变量、数据类型
  5. 使用JavaScript在Canvas上画出一片星空
  6. Apache mod_rewrite规则重写的标志一览
  7. Oracle 补丁体系 及 opatch 工具 介绍
  8. Spring Boot 的 GraphQL 框架DGS
  9. MySQL可不可以直接定义程序_mysql8 参考手册-定义存储程序
  10. knn算法的最佳k值_KNN(k-NearestNeighbor)算法笔记