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

IE6下class叠加不生效

在做项目的时候,测试IE6的兼容性时发现一个很奇怪的问题,不知道如何更专业的描述问题,只知道代码及现象,问题出在IE6不识别class叠加,直接忽略了前导的class的存在而导致样式被意外覆盖。

下面看看效果图:

1.正常浏览器:

正常浏览器

2.IE6下:

IE6下bug

大家应该看出区别了,同样的代码,IE6下第二块的背景色被后面的“.cc”给覆盖了,其前导的class“.aa”不起任何作用,看上去像是css优先级导致的,但是不确定,也没有找到有效的解决方案。不信你可以试试,代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <style>
    .content { width: 850px; margin: 0 auto; }
    .content div { float: left; margin-right: 10px; display: inline; font-size: 18px; color: #fff; padding-top: 50px; }
    .aa { width: 200px; height: 150px; background: #333; }
    .aa.cc { width: 200px; height: 150px; background: #f00; }
    .bb { width: 200px; height: 150px; background: #0f0; }
    .bb.cc { width: 200px; height: 150px; background: #00f; }
  </style>
</head>
<body>
  <div class="content">
    <div class="aa">
<pre>
  .aa {
    background: #333;
  }
</pre>
    </div>
    <div class="aa cc">
<pre>
  .aa.cc {
    background: #f00;
  }
</pre>
    </div>
    <div class="bb">
<pre>
  .bb {
    background: #0f0;
  }
</pre>
    </div>
    <div class="bb cc">
<pre>
  .bb.cc {
    background: #00f;
  }
</pre> 
    </div>
  </div>
</body>
</html>

不知道是IE6不知吃这个选择器还是说有bug?还有待研究。匆忙写下记录下,日后有空慢慢分析吧,如果你找到原因并解决了此问题,麻烦留言告知,万分感谢!

题外话:明天就放假了,心情真TM好啊!顺祝大家:

十一快乐,中秋快乐!

双节放假是不是很给力!给力就对了!写完肥家!
« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 13#
    谢亮
    谢亮 Firefox 23.0 Windows 8 x64 Edition 2013-08-16 08:40 回复
    顶起,ie6一般采用 hover_name 方法, 但不太帅.
    小松
    小松 Google Chrome 28.0.1500.95 Windows 8 x64 Edition 2013-08-16 08:43 回复
    @谢亮:这个也是没办法的办法,坐等IE6被淘汰,其实还要看某些国内浏览器厂商的进度
    谢亮
    谢亮 Firefox 23.0 Windows 8 x64 Edition 2013-08-16 08:53 回复
    @小松:哈, 看到你的博客突然有种想把我的博客关掉的嫌疑..简直是不入流... 拜膜了
    小松
    小松 Google Chrome 28.0.1500.95 Windows 8 x64 Edition 2013-08-16 11:00 回复
    @谢亮:怎么会,你的也挺不错的啊
  2. 12#
    奇遇
    奇遇 Firefox 16.0 Windows 7 x64 Edition 2012-11-10 12:01 回复
    IE6不支持这么高端的选择器吧。。
    小松
    小松 Google Chrome 24.0.1290.1 Windows 8 x64 Edition 2012-11-10 13:38 回复
    @奇遇:这个应该是基本选择器,这是class叠加而已
    奇遇
    奇遇 Firefox 16.0 Windows 7 x64 Edition 2012-11-10 13:51 回复
    @小松:但是IE6就未必认识。。。
  3. 11#
    魔法基佬MKⅡ
    魔法基佬MKⅡ Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 17:59 回复
    IE6的存在本身就是个BUG。
    小松
    小松 Google Chrome 18.0.1025.166 Android 4.0.4 2012-10-08 18:06 回复
    @魔法基佬MKⅡ:一朵奇葩!我已经放弃,但是还有很多人不肯放弃
    魔法基佬MKⅡ
    魔法基佬MKⅡ Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:11 回复
    @小松:因为是”领导要求“么?
    小松
    小松 Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:15 回复
    @魔法基佬MKⅡ:这个我就无从考证了,不过,说实话,IE6真的可以退休了...PS:无力的吐槽啊
    魔法基佬MKⅡ
    魔法基佬MKⅡ Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:17 回复
    @小松:嗯,一般网站暂且不论,个人博客用IE6看,基本大部分错乱。
    小松
    小松 Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:32 回复
    @魔法基佬MKⅡ:真要消灭,还是要依靠大站的力量的
    魔法基佬MKⅡ
    魔法基佬MKⅡ Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:36 回复
    @小松:所以才任重道远。
    小松
    小松 Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:42 回复
    @魔法基佬MKⅡ:哈哈,我估计等到IE12来了,IE6还没退休
    魔法基佬MKⅡ
    魔法基佬MKⅡ Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:44 回复
    @小松:有天朝内网人民的支持,XP和IE6就是永生。
    小松
    小松 Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-08 20:47 回复
    @魔法基佬MKⅡ:哈哈,我朝P民V5
  4. 10#
    西门
    西门 Google Chrome 22.0.1229.79 Windows 7 x64 Edition 2012-10-05 23:22 回复
    这个是IE6的BUG,他只认最后一个,并且把前面的也覆盖了。
    无解,尽量不要这样用。
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-10-06 10:44 回复
    @西门:前一个class也能识别,识别不准确,后一个的属性会应用到所有调用它的地方,而不识别前一个class的限制,还是选择器的bug
  5. 9#
    林西老九
    林西老九 Google Chrome 22.0.1229.79 Windows 7 2012-10-05 19:24 回复
    乖乖来,我来了,松松,你想我没啊
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-10-06 10:42 回复
    @林西老九:想你也没用,说消失就消失了这么久!
  6. 8#
    Xider
    Xider Google Chrome 23.0.1262.0 Windows XP 2012-10-03 18:47 回复
    据说是IE6类选择器的问题
    松哥试试看把.bb.cc的.cc改下名字再试试看...
    我是新手错了别PIA
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-10-06 10:41 回复
    @Xider:.cc也是随便取的,改成别的也一样的
    Xider
    Xider Google Chrome 23.0.1262.0 Windows XP 2012-10-06 13:18 回复
    @小松:这个BUG貌似很多人都有提到过,就是当为一个元素连用 2 个及以上的class来匹配样式时,ie6会识别为样式规则中最后一个 class的定义...这个一般就是ie6渣渣选择器的BUG
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-10-06 13:25 回复
    @Xider:能发我一些类似的文章链接吗?
    Xider
    Xider Google Chrome 23.0.1262.0 Windows XP 2012-10-06 13:26 回复
    @小松:http://blog.sina.com.cn/s/blog_6bb7b9e9010143s3.html http://liunian.info/ie6-multiple-class-css-bug.html 这些都是 , 有事问度娘~
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-10-07 09:39 回复
    @Xider:嗯,看到了,原来早就有人发现了,只是没有很好的解决方案
    Xider
    Xider Google Chrome 23.0.1262.0 Windows XP 2012-10-07 09:40 回复
    @小松:没错了,这个BUG真心无力了 目测微软也不会怎么管了
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-10-07 10:00 回复
    @Xider:IE6微软早就放弃了,修复bug是不可能了
  7. 7#
    Junan
    Junan Google Chrome 22.0.1229.79 Windows XP 2012-10-03 14:33 回复
    看图片感觉IE6左右两边宽了
    小松
    小松 Google Chrome 18.0.1025.166 Android 4.0.4 2012-10-03 15:15 回复
    @Junan:不是的,是背景颜色的问题
  8. 6#
    2nd丶骨頭
    2nd丶骨頭 Google Chrome 17.0.963.84 Windows XP 2012-10-02 17:33 回复
    小松哥中秋快乐,国庆快乐~!(额。。 这两天玩high了,祝福有点儿晚哈~
    小松
    小松 Google Chrome 22.0.1229.79 Windows 7 2012-10-02 19:12 回复
    @2nd丶骨頭: 不晚不晚
  9. 5#
    琪琪
    琪琪 Opera Mini 4.5.29721 J2ME/MIDP Device 2012-10-01 14:21 回复
    来了,国庆快乐!
    小松
    小松 Google Chrome 18.0.1025.166 Android 4.0.4 2012-10-01 14:37 回复
    @琪琪:肥家咯!国庆快乐!节后再回来
  10. 4#
    鲜葡萄创意站
    鲜葡萄创意站 Google Chrome 17.0.963.84 Windows XP 2012-09-30 15:29 回复
    话说之前为了搞一下payple,把IE6升级到IE8,现在还后悔了。那么好用的神器怎么要升级,先在要测试主题兼容性都木有办法了。唉..节日快乐噢
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-09-30 15:37 回复
    @鲜葡萄创意站:不会吧?!IE6我怎么觉得这么难用呢???
    鲜葡萄创意站
    鲜葡萄创意站 Internet Explorer 8.0 (Compatibility Mode) Windows XP 2012-09-30 18:14 回复
    @小松:没了IE6..测试不了一些主题的IE6兼容性了嘛...所以后悔了。哈哈
    小松
    小松 Google Chrome 23.0.1271.1 Windows 8 x64 Edition 2012-09-30 18:33 回复
    @鲜葡萄创意站:用IE Test 或者虚拟机装一个IE6吧~
1 2

随机日志:

推荐日志:

彩色标签:

sitemap