2009.03 24

10个技巧帮你搞定IE 6

标签: , ,
Featured, 资源共享

虽然说IE8已经来了，并且表现不错。8个小时突破1200W下载，远远地超过24小时下载800W的firefox。但对于整个互联网，IE6仍然是用户最多的浏览器。暂不说IE6怎样，把Web的表现做得更好，既是一种责任，也是一种能力的表现。如果你依然对IE6所出现的种种问题无可奈何，就让我带你来看一下来自SitePoint的 10 Fixes That Solve IE6 Problems，学会这10个方法，你将可以解决大部分IE6出现的问题。

ie6

1. 使用 DOCTYPE

你需要在HTML页面的最顶部加上DOCTYPE类型，当然， strict版是值得推荐的，例如：

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

或者, XHTML页面的!DOCTYPE：

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

你最不想看到的是，IE6进入怪癖模式 – 其实已经够多怪癖了。

2. 设置position: relative

设置position:relative解决了不止一个问题，特别当需要设置对齐的时候。很明显，你需要明白的一点是，绝对定位是相对来说的。说不定，因为你没有设置，而不知道东西都飞到那去了。比如，你设计了每篇文章前都有一张图片，最后，你发现，只有一张图片在页面上，或许，是他们重叠了。

3. 给浮动元素设置 display:inline 值

这源于著名的IE6双倍外边距BUG，例如，你给一个DIV设计了浮动，并且，设置了margin-left:5px;，在IE6中很可能就是margin-left:10px了，这里，给浮动元素设置 display:inline；，即可解决问题。

4. 为元素设置 hasLayout

很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决。（如果你不知道hasLayout是什么，请看这里）

最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。设置一个具体的值是推荐的，但有时候并不一定知道高度多少，这里，你可能会用到height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。

5. 解决字符重复出现的问题

复杂的布局可能导致一些浮动元素里面的文字，出现在清理浮动位置的下面。这是一个奇怪的问题，下面这此可以帮你解决：

  • 确保浮动元素设置了 display:inline;
  • 在浮动元素中使用 margin-right:-3px;
  • 在浮动元素的最后一个元素后加上一个IE注释，例如： <!--[if !IE]>把你的注释放这里… <![endif]-->
  • 在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)

UPDATE: 最简单的方法是删除掉所有注释。（感谢恬玮儿的提示，我自己并没有遇到过，不过，google了一下，发现这个方法也可以解决，并且，这是值得推荐的一个方法。）

你可以到positioniseverything.net中查看更多关于这个的解释。

6.只在<a>标签中使用hover，IE6只支持<a>标签显示hover样式

当然，你还是可以通过JS来解决这个方法。但是， 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。

7. 使用!important 或高级选择器来区分IE浏览器

比如min-height可以避免使用CSS来实现对IE的兼容。

#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 让IE6显示这个高度 */
}

IE6 并不能正确地识别min-height，可以设置固定的高度，让IE6解析为20em。即使如此，它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器：

#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}

8. 避免按比例确定的尺寸

比例会让IE6变得错乱，除非你给父元素添加一个确切的高度。不然，给其他的加上!important，例如：

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

9. 尽早测试，经常测试

别忘记尽早测试，经常测试， 除非你的程度已经完成。不然，你可能花更多的时间来解决IE6的问题。一般情况下，如果你的网站能在IE6和firefox下良好表现，估计其他浏览器就不会有什么大问题了。(至少我自己深有体会)

10. 重构你的代码

很多情况下，解决一个问题，可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的，没有一边制作，一边测试IE6的表现，导致最近有很多奇怪的问题，因为布局比较复杂。后来，干脆重构代码。用了2天。我想，如果是想解决方法，或许2天都搞不定。

 

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » Featured, 资源共享 »

75

  1. 2009.03.24 10:28 pm
    leehow这个VIP(visit): [回复]

    我看到了…

  2. 2009.03.24 10:29 pm
    恬玮儿(visit): [回复]

    我板凳。。

  3. 2009.03.24 10:38 pm
    恬玮儿(visit): [回复]

    5. 解决字符重复出现的问题

    复杂的布局可能导致一些浮动元素里面的文字，出现在清理浮动位置的下面。这是一个奇怪的问题，下面这此可以帮你解决：

    * 确保浮动元素设置了 display:inline;
    * 在浮动元素中使用 margin-right:-3px;
    * 在浮动元素的最后一个元素后加上一个IE注释，例如： 把你的注释放这里…
    * 在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)

    这个貌似是因为页面里的注释元素太多，只要把页面里的注释元素删掉就没有这个问题了。。。

  4. 2009.03.24 10:53 pm
    Herb(visit): [回复]

    怪癖很多, 没有好印象, 但是刚接触的浏览器就是它，就像，linux很好，但是却不能说windows的坏话一样，毕竟他让你用上了个人电脑。。
    所以修修补补，是值得的，因此，这也就是个好文，哈哈
    另外DOCTYPE有什么具体的作用？不是很明白。

  5. 2009.03.24 11:03 pm
    lutuzhi(visit): [回复]

    意外发现，刚才搜索如下错误：

    502 Bad Gateway
    nginx/0.7.43

    最新版哦

  6. 2009.03.24 11:32 pm
    Alan(visit): [回复]

    ，前排占位，做记号 :D

  7. 2009.03.24 11:41 pm
    sofish(visit): [回复]

    @leehow这个VIP: 要回复你都难，囧囧囧，博客出现了一个小时错误。你太快了，小红色贴上。

    @恬玮儿: 嗯，其实我也没有遇到过这个，之前是有看过，不过，没有印象怎么去解决。

    @Herb: DOCTYPE是一个声明，说明文档的类型之类的。或许会像是Java中声音变量的类型一样。避免解析错乱。

    @lutuzhi: 刚才好像被攻击了。

    @Alan: 恭喜，点位成功，这是第6排。

  8. 2009.03.24 11:43 pm
    Lorz小朋友说(visit): [回复]

    用了2两（香油？）

  9. 2009.03.25 1:19 am
    恬玮儿(visit): [回复]

    @sofish:我是遇到过的，确实只要都删除了注释就米问题了。。。哈哈，反正这里提一下，也算个解决方法吧。。。

  10. 2009.03.25 3:18 am
    toydime(visit): [回复]

    虽然仍有一知半解，但会在今后的学习中注意。

  11. 2009.03.25 8:40 am
    leehow(visit): [回复]

    @sofish:我只是觉得你的沙发太难遇到，遇到了自然很激动…

  12. 2009.03.25 9:22 am
    Yacca(visit): [回复]

    华丽丽的出来飘一下,支持下…display inline-.- 我貌似这在个点上做错了,给ie6设置了不同的间距,囧.

    米时间去学,也米时间去搞…被资本家剥削死了-.-

  13. 2009.03.25 9:30 am
    leplay(visit): [回复]

    现在正在搞定IE6呢，改的我都有杀人的冲动了…… XD.

  14. 2009.03.25 10:01 am
    sofish(visit): [回复]

    @Lorz小朋友说: 什么意思的？

    @恬玮儿: 哈，我g了一下，发现就像你所说的。所以，已经UPDATE了文章，加上你的提供的方法。

    @leehow: 很激动，因为leehow是沙发，哈。

    @Yacca: 我就是设置了不同边距的哪个，哈哈。

    @leplay: 囧，慢慢来。

  15. 2009.03.25 10:08 am
    囧囧有神的小盆U(visit): [回复]

    额~~
    貌似把bgiframe给忘了

  16. 2009.03.25 10:13 am
    sofish(visit): [回复]

    @囧囧有神的小盆U: bgiframe, jQuery Plugin? 解决z-index bug? ….

  17. 2009.03.25 10:31 am
    eddie(visit): [回复]

    不错的文章，比较喜欢第2个跟hasLayout

  18. 2009.03.25 10:35 am
    zwwooooo(visit): [回复]

    兼容是件麻烦事~

  19. 2009.03.25 10:40 am
    ZeroZ(visit): [回复]

    挑俩错别字。
    1、第7条。“让IE6解板为20em”中的“解析”。你应该是用五笔吧？
    2、第10条。“用了2两”这个应该是“用了2天”？

  20. 2009.03.25 11:13 am
    manboo(visit): [回复]

    学习一下。。

  21. 2009.03.25 11:21 am
    爱月(visit): [回复]

    决定，彻底，放弃，IE6，用户

  22. 2009.03.25 11:26 am
    sofish(visit): [回复]

    @ZeroZ: 啊，细心的你。谢谢。我去修改=,=…

    @all: 顺便骚扰一下，文章UPDATE了一句：

    5. 解决字符重复出现的问题

    UPDATE: 最简单的方法是删除掉所有注释。（感谢恬玮儿的提示，我自己并没有遇到过，不过，google了一下，发现这个方法也可以解决，并且，这是值得推荐的一个方法。）

    BTW. 竟然有四位朋友是在Spam名单中救出来滴=,=… 分别是@toydime，@eddie，@ZeroZ，@manboo。AK出错？ 囧囧囧。

  23. 2009.03.25 11:28 am
    manboo(visit): [回复]

    囧，我不是Spam..
    偶尔来这里学习下。

  24. 2009.03.25 11:29 am
    sofish(visit): [回复]

    @manboo: 哈，没，我只是说，救了出来。spam我自己都会删掉。

  25. 2009.03.25 12:14 pm
    吖Bee(visit): [回复]

    我升级为IE8了~~~我的BlogIE6与IE7是差不多~

  26. 2009.03.25 12:56 pm
    tonic(visit): [回复]

    这留言····汗
    IE6真的有那么多用户吗？统计上现在好像主流是IE7啊～
    学习学习这些技巧了～

  27. 2009.03.25 12:59 pm
    sofish(visit): [回复]

    @tonic: 其实IE6还是最多滴，特别是中国。

  28. 2009.03.25 1:21 pm
    许三品(visit): [回复]

    这篇文章值得收藏，对于学习自己制作主题的新手而言相当有帮助！

  29. 2009.03.25 2:25 pm
    utaoke(visit): [回复]

    尽管IE8已经发布，但是很多人测试在XP下都有Bug所以暂时没有更换的念头。

  30. 2009.03.25 4:30 pm
    会律博客(visit): [回复]

    貌似和火狐干上的意思！

  31. 2009.03.26 3:24 am
    老所(visit): [回复]

    我看到这些就犯晕。

  32. 2009.03.26 3:43 pm
    54gh(visit): [回复]

    我认识的朋友很少用6的了，基本都是7，还有啊，sofish的文章好热啊，一出来就这么多人占楼了

  33. 2009.03.26 4:52 pm
    shaowei(visit): [回复]

    纯顶马勒隔壁沙滩上的动物

  34. 2009.03.26 4:53 pm
    shaowei(visit): [回复]

    偷偷问一下，鱼鱼现在评论留言插件是3天更新一次？ gmail上偷偷说

  35. 2009.03.26 4:54 pm
    shaowei(visit): [回复]

    还有人问找鱼鱼修改主题，简单修改。。暂不方便上gmail，回去扯

  36. 2009.03.26 6:42 pm
    sofish(visit): [回复]

    @老所: 老所，自从你上次说代码可读性很差，我已经修改了，变成这样：

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

    还不错吧？

    @shaowei: 啊？最近没有时间帮人修改。如果是我们那伙人的博客，那有问题直接找我好了。

  37. 2009.03.26 6:44 pm
    luckydog(visit): [回复]

    博主说的好专业，俺都没有看懂涅@

  38. 2009.03.27 7:44 am
    yinheli(visit): [回复]

    这么多的技巧,又是篇值得珍藏的文章.有学习了不少.
    很多时候,我们的要求已经比较简单了.只要各个浏览器在表现上一致没有走样变形即可.

  39. 2009.03.27 10:58 am
    酷宝贝(visit): [回复]

    很强大 ！顶起来再说！！

  40. 2009.03.27 2:26 pm
    zEUS.(visit): [回复]

    39楼～就坐，喝茶…

  41. 2009.03.27 2:38 pm
    fantizi5201718(visit): [回复]

    10个技巧帮你搞定IE 6

    这不错！很我没来看看了！网站页面做的很个性！www.5201718.com

  42. 2009.03.28 3:12 am
    welee(visit): [回复]

    我觉得，最好还是不要将架构太复杂化，越简单的架构在 IE 各版本的问题就越少，当然，这会牺牲许多创意，无奈，谁叫 IE6 还不死？

  43. 2009.03.28 1:22 pm
    老时(visit): [回复]

    ff,最爱。

  44. 2009.03.30 2:52 pm
    joojen(visit): [回复]

    IE6在国内市场份额这么高，实在让不少网页设计者抓狂

  45. 2009.03.31 10:21 am
    icod(visit): [回复]

    楼主上次提到一篇文章
    Top reasons your CSS columns are messed up
    为什么说你的CSS分栏乱七八糟 ，能否翻译一下，十分的感谢!!!!!!!!!

  46. 2009.04.01 1:44 am
    减肥食谱(visit): [回复]

    一直都在使用IE7。。

  47. 2009.04.02 1:56 pm
    yu(visit): [回复]

    你好，有幸拜读了您的blog，请问你愿意做话题营销么-有偿合作的！类似feedsky，但是价格会比他们略高~

    如果感兴趣，请联系我：qq 1012822370 鱼

  48. 2009.04.03 2:30 am
    不锈钢管(visit): [回复]

    有收获，顶一下。

  49. 2009.04.03 9:24 am
    daniel(visit): [回复]

    非常好的总结

  50. 2009.04.03 3:30 pm
    shamas(visit): [回复]

    我现在发现ＩＥ7比6更差劲

  51. 2009.04.03 4:50 pm
    安(visit): [回复]

    “把Web的表现做得更好，既是一种责任”说得好…曾经的IE到现在似乎得到的评价总是趋于负面，即使IE8的表现有很大改观，很多同学们依然不明就里的批==

  52. 2009.04.04 9:45 am
    LiGht(visit): [回复]

    怎么样让 IE6 支持 PNG 透明图片呢？

  53. 2009.04.06 3:51 pm
    小小铺(visit): [回复]

    都很实用.

  54. 2009.04.07 1:01 pm
    Showfom(visit): [回复]

    国外IE6使用量很少，所以英文站基本不考虑IE6

  55. 2009.04.09 3:13 am
    汽车改装(visit): [回复]

    都是一些很常遇到的问题,挺实用的!总结的不错!不知IE8的HACK又会有哪些!

  56. 2009.04.09 5:55 pm
    lutuzhi(visit): [回复]

    有什么好工具能同时测试网站在不同浏览器下的效果没

  57. 2009.04.10 11:37 am
    WordPress啦(visit): [回复]

    IE8虽然已经出现，但好像还有bug，过时的浏览器还是有相当一部分的用户，兼容性确实非常重要

  58. 2009.04.11 1:43 am
    seri(visit): [回复]

    好像很久没更新了呀 =。=

  59. 2009.04.12 7:45 am
    flasher(visit): [回复]

    昨天用第二条成功消除了一个注释的bug

  60. 2009.04.15 4:22 pm
    cuikai(visit): [回复]

    其实国外的很多网站已经放弃IE6了，只有玩着盗版系统的我们，还在苦苦支撑

  61. 2009.04.16 11:03 am
    二手科学家(visit): [回复]

    IE还真是麻烦，要是能。。。那该多好啊！

  62. 2009.06.19 9:24 pm
    bolo(visit): [回复]

    还是建议不要再为ie6用户着想了，是时候逼他们升级了

  63. 2009.07.11 3:52 pm
    solar(visit): [回复]

    9. 尽早测试，经常测试
    严重赞同。。。这样可以避免很多无谓的时间浪费。可能开始会花点时间，但这是值得的。。。每次搞页面，Safari、Opera、IE、Firefox、Chrome……万恶的浏览器，前端设计师的噩梦。OMG。。。

  64. 2009.07.11 4:04 pm
    solar(visit): [回复]

    @LiGht:只能通过javascript，而且只能是插入页面中的png，CSS中使用png做背景无法实现（至少我找了好久都没有解决方案）。。。。

  65. 2009.08.21 12:29 pm
    小子(visit): [回复]

    写的很不错的说

  66. 2009.09.26 9:56 am
    YY语音(visit): [回复]

    我现在用的风格在IE6下面还是比较正常的

  67. 2009.09.26 9:57 am
    YY(visit): [回复]

    很喜欢这类技术文章，sofish多发点啊

  68. 2009.11.10 11:44 pm
    步行天下(visit): [回复]

    现在我写企业站基本就过IE6 /Ff 其他的基本不管!
    发现自己懒得要命了!

  69. 2010.03.17 12:52 pm
    nortan(visit): [回复]

    我的这个网站http://www.voalnd.com.cn的Logo在IE6下就显示不了背景透明，很是不爽

  70. 2010.04.28 2:12 pm
    disinfeqt(visit): [回复]

    介个也拿走了…

  71. 2010.05.18 5:35 pm
    武汉seo(visit): [回复]

    非常不错的css技巧，收藏了！

  72. 2010.06.08 3:35 pm
    sizedoctor(visit): [回复]

    恩，值得收藏，我用的还是ie6

  73. 2010.06.17 10:35 am
    iphone lover(visit): [回复]

    收藏了.真的很不错!

  74. 2010.07.12 8:57 am
    Yu(visit): [回复]

    IE6,IE7中没问题..到IE8中就错位了点..=.=

  75. 2010.07.12 10:56 am
    深圳论坛(visit): [回复]

    现在用IE6的还很多，这些方法太有用了！谢谢博主

Additional comments powered by BackType