汇总 IE 在 CSS 中常见的 中 bug

  从今天开始,我就在为新主题布局了,我认为布局相当的重要,就像造楼打地基一样,在写 HTML 的时候就要兼顾到美观、SEO、还有在各浏览器下的兼容性,其中最难的就要属兼容性了,我又不想用 Kill ie6 简单地忽视之,虽然我打心底里想把 ie6 kill 掉,昨天又刚好看到盘先海总结了一些 IE 下常见的 bug,以后写主题的时候估计会用到,先收藏转载一下。

1.IE 6 下不支持透明的 PNG 图片的解决方案

  DD_belatedPNG,支持 backgrond-position 与 background-repeat.,同时 DD_belatedPNG 还支持 a:hover 属性,以及<img>,不仅支持 png 作为图片,也支持标签插入的 png 图片,你可以查看目前发现的一些问题。同时,这里也有一份中文的说明。

2.IE 6 背景闪烁问题

  如果你给链接、按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于 IE6 没有将背景图缓存,每次触发hover的时候都会重新加载,可以用 JavaScript 设置 IE6 缓存这些图片:

document.execCommand("BackgroundImageCache",false,true);

  如果 a 和 a:hover 使用的不同的背景图片,将图片合成在一起,css 中通过 background-postion 控制其位置,页面中加入从缓存读取背景图片的 javascript 脚本。

3. IE 6 双空白边浮动 bug

  当你为一个浮动元素赋予一个 margin 值,IE 6 下这个 margin 值会被双倍计算。解决办法:添加 display:inline;

4. IE 6 3像素文本偏移 bug

  假设将-个元素向左浮动,并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边,其宽度等于浮动元素的宽度:

.float { float: left; width: 100px; }
p { margin-left: 100px; }

如果这么做,IE 6 在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。解决办法:

* html p { height: 1%; margin-left: 0; }
* html .Float { margin: 0; }

5.IE 6 躲躲猫 bug

  出现这个 bug 的条件是:一个浮动元素后面跟着一些非浮动元素,然后是一个清理元素,所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素,那么中间的非浮动元素看起来消失了,隐藏到了父元素的背景颜色或图像后面,只有在刷新页面时才重新出现。

  解决办法:让包含它们的元素具有hasLayout属性:* html .box { height: 1%; }

  我知道 IE 的 bug 肯定不只这些,现在向广大博友征集 IE 其他的 bug,最好是提供解决方案,本文会同步更新,谢谢各位啦~

  本文转自:http://www.panxianhai.com/ie-bugs.html

» 本文链接地址:http://wange.im/ie-bug.html
» 订阅本站:http://feed.wange.im

本文已盖 67 层楼

  1. 回复 自由人 说:

    今天竟然是搜索IE bug汇总进来的。。。你真强悍,我测试CSS编写时就在IE下有bug 气煞我也。。。应该就是那个3. IE 6 双空白边浮动 bug

  2. 恩都是找个问题啊

  3. :mrgreen: 呵呵 不要用PNG啦

  4. 回复 itlobo 说:

    我以为是老万自己写的呢.

  5. 回复 Firm 说:

    IE6每次都要例外,哎,俺好想跟俺们说升级去啊

  6. IE6还在考虑呢。。。

  7. 回复 菜根谭 说:

    IE6很遥远的东东了,早就不用了,呵呵

  8. 呵呵!~CSS的bug 好多 哎

  9. 回复 一剑 说:

    访问统计里,使用IE6的占到50%以上,所以现在还是不能放弃IE6下的调试。

  10. 回复 漠岚 说:

    额...只会css. :mad: js还不会内

  11. 回复 无名 说:

    新主题诶 期待。真的想先预览一下到底是什么模样的 哈哈哈 :idea:

  12. 回复 17doit 说:

    遇到过不少IE6下面的问题 不过都没记下来 呵呵

  13. 回复 rusaer 说:

    曾经做ie6兼容的时候真想把电脑砸了。

  14. 回复 hzlzh 说:

    那个PNG经常遇到IE6的朋友看着巨难看,于是直接换gif了~懒的改

  15. 回复 Jclyn 说:

    新主题耶 :razz:
    超人昨天还损我来着
    撞墙去也

  16. 好久没有来了今天来看看 看不出来万戈兄的博客越来越完美 :smile:

  17. 回复 超人 说:

    哈哈..期待你的大作..

  18. 回复 江流 说:

    测试下 现在是不是ie8

  19. 回复 卢松松 说:

    做网页设计还是要从ie6开始啊

  20. 回复 秦大少 说:

    不应该再支持IE6了,要KILL IE6,就要彻底抛弃他!

  21. 回复 leecay 说:

    很多人作的皮已经舍弃在IE6调试了

  22. 回复 小雯子 说:

    IE 6 下不支持透明的 PNG 图片的解决方案
    具体怎么做?求解。。
    我一般不用png,直接gif,可是像素不好。 :arrow:

  23. 回复 笑话 说:

    没用过IE6,看来我也得好好学习CSS啦~~~

  24. 过些天我就开始学习DIV+CSS咯 :lol:

  25. 回复 CT 说:

    DW cs4一个改良的地方就是可以测试不同浏览器的兼容问题,推荐下载个绿色版用用

  26. 回复 Jutoy 说:

    可是IE还是用户最多的…… :???:

  27. 回复 猴子 说:

    看来老万真的用心在学CSS呢 :wink:
    正好跟着你学习,进步。

  28. 回复 A.shun 说:

    我的评论部分在ie6下也是错位严重。。恨啊

  29. 回复 evlos 说:

    除了抵制IE6,小邪已经想把整个IE系列都给抵制了去 ~ :cry: 感觉特杯具 ╮(╯▽╰)╭ ~

  30. 回复 星网 说:

    抵制IE6从我做起!我博客的文章你看到了吧? :twisted:

  31. 回复 午夜 说:

    照目前的情况来看,IE6已经有了5大罪名,本法官判决,IE6罪大恶极,纯属妖孽,罪不可赦,即刻行刑。 :mad:

  32. 回复 章鱼 说:

    菜鸟前来围观

  33. 看見有IE6就拉出去錘,可樂米最美. :lol: :lol: :lol:

    • 回复 Google不爱我 说:

      其他的方面还算完美,只是上次俺一次性固定了二十来个标签页,突然就变得奇慢无比…… :???: 不知是不是单纯人品问题

  34. 回复 zwwooooo 说:

    IE6真烦,今天修改发布的主题就给IE6拖了很长时间 :arrow:

  35. 回复 泡面 说:

    IE6有N多问题。当初是舍弃W3C搞IE6,现在是专心W3C兼容IE6。晕死了。

  36. 回复 Nox 说:

    我晕,慢了一步。。。

  37. 回复 王盼盼 说:

    这样也能沙发,我自己都腻了,这个月千万别给我颁奖。

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析