你的位置:快乐忆站 \ 前端 \ 文章正文

修复两处IE6下的bug

在昨天之前,我已经打算放弃使博客兼容IE6了,CSS里面移除了N多非标准的CSS语法,也考虑过在IE6访客来访时显示一条提示信息,提醒访客升级浏览器。但是最终我放弃了这些行为,因为毕竟IE6还有很大的用户群,放弃这些用户群意味着放弃我网站接近1/6的访客,这对于我这个本来流量就不大的站来说是一大损失,晒晒我博客最近30天访客浏览器排行:

点击查看原图

很欣慰,排第一的竟然不是IE家族的,看来IE的份额下降的很明显,不知道是不是好事?

能解决这两个bug得感谢dudo,是他送给我一本名叫《精通CSS:高级web标准解决方案》的书,然后我在书中找到的解决方法,之前一直在苦恼IE6的兼容性问题,下面用图说明问题:

图1:

点击查看原图

图2:

点击查看原图

上述两个问题困扰我很久,昨天在看到书中关于浏览器的bug和bug修复时轻松搞定。先说说原因吧。第一张图是因为IE6的双空白边浮动bug,产生的关键因素有两个:1.float设为left或right;2.左右margin值不为0。具备上述两个条件的元素在IE6下会具有双倍的边距,就是margin值*2,就像第一张图中的缩进增加额一倍一样;第二张图是IE6的相对容器中的绝对定位的bug,产生的原因在于相对定位的元素没有获得IE6的内部hasLayout属性,因此绝对定位元素相对于视口进行了定位,简言之,忽略了容器的一切maigin和padding,这样决定定位就很容易出错了,就像第二张图中的头像滑出了容器一样。

问题分析完了,解决方法也该出来了。对于第一种双边距的问题,我们设置元素的display属性为"inline"即可轻松解决,第二种问题稍微复杂一点,需要用到css hack来解决。具体如下:对采用决定定位的元素的容器设置一个height,采用的写法是

* html .container {
height:1%;
}

注意,container为你对应的容器的class,请根据具体情况修改!这里利用的是IE6的一个bug:IE6或更低的版本中元素会不正确地扩展以适应他们的高度,所以设置小的高度(1%)不会影响实际高度,但是其他浏览器并没有这个bug,所以在css前加了* html,这样就只有IE6及以下版本能识别了,这应该叫以bug修复bug,哈哈~

两个揪心的问题解决了,人心情也好了,所以在今天下午折腾了一下ajax无刷新留言,竟然成功了,不枉我码了一下午的代码啊~~~~~(>_<)~~~~ 手都酸了~有了ajax留言是不是爽多了呢?这个大家说了算~(因为代码不具有代表性,目前不同的主题修改起来比较麻烦,故不共享代码了,感兴趣的自己下载本站js研究吧)。

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 56#
    sprityaoyao
    sprityaoyao 2011-05-24 21:50 回复
    其实,这个问题我一直在遇到,也许是我CSS的技术不够吧,反正每一个主题我都还要纠正这些问题
    小松
    小松 2011-05-24 22:20 回复
    @sprityaoyao:多看看css方面的书,这些很基础的~
  2. 55#
    电脑人生
    电脑人生 2010-11-24 12:15 回复
    恩恩!!
  3. 54#
    小邪
    小邪 2010-10-31 06:35 回复
    。。。。刚刚就跟人说,开发者搞来搞去,都弄完了。。
    就得开始纠结IE的事情了。。。
    小松
    小松 2010-10-31 11:51 回复
    @小邪:现在大站对这个浏览器兼容性还是很看重的,毕竟国内很多都是XP+IE6
  4. 53#
    菜根谈
    菜根谈 2010-10-29 21:26 回复
    IE6现在不用了,兼容性太差
  5. 52#
    kaka
    kaka 2010-10-28 15:53 回复
    本来我也是这么想的~但IE6的用户群实在是太庞大了~
    小松
    小松 2010-10-28 16:03 回复
    @kaka:是的,这是很郁闷的事~
  6. 51#
    睿智小超人
    睿智小超人 2010-10-27 21:43 回复
    可能很多人不知道ie6在国内还是占有最大市场份额
    小松
    小松 2010-10-27 21:46 回复
    @睿智小超人:知道,中国市场就是这样,没办法
  7. 50#
    it博客
    it博客 2010-10-26 21:10 回复
    看来博主是个高手 ~~
    小松
    小松 2010-10-26 21:13 回复
    @it博客:呵呵,久闻翔子大名啊~今日幸会~
  8. 49#
    若蘭
    若蘭 2010-10-26 12:40 回复
    又见折腾。
    小松
    小松 2010-10-26 13:18 回复
    @若蘭:还好,这次折腾的很少~
  9. 48#
    龙湾港
    龙湾港 2010-10-26 10:19 回复
    博主的模板好简洁啊
    小松
    小松 2010-10-26 10:21 回复
    @龙湾港:那是必须的,我就喜欢简洁~
  10. 47#
    马凝
    马凝 2010-10-26 09:54 回复
    好久没来,过来看看你,还是那么能折腾
    小松
    小松 2010-10-26 10:20 回复
    @马凝:呵呵,咱现在最喜欢的就是折腾了~
1 2 3 4 5 6

随机日志:

推荐日志:

彩色标签:

sitemap