搜索

查看: 16|回复: 1

IE6下特殊selector规则的表现

[复制链接]

489

主题

0

好友

1764

积分

管理员

发表于 6 天前 |显示全部楼层
在IE6下,.a.x这样的selector,只会识别.x(也就是第二个className)。如果这样写   .a.x{background: red;} .b.x{background:blue;}会发现:即使.a和.b指的是两个不同的元素,最后这两个元素的背景色都会是blue。
代码如下:
  1. <style type="text/css">
  2.     div{
  3.         height: 50px;
  4.         border: 1px solid #333;
  5.     }
  6.     .red.box{
  7.         background: red;
  8.         height: 100px;
  9.     }
  10.     .blue.box{
  11.         background: blue;
  12.         width: 200px;
  13.     }
  14.     .green.box{
  15.         background: green;
  16.         border: 3px dashed green;
  17.     }
  18.     </style>
  19.     <script type="text/javascript" src="http://s0.qhimg.com/lib/qwrap/1141.js"></script>
  20.     <script type="text/javascript">
  21.     function changeCls(cls){
  22.         W('div').removeClass('red').removeClass('blue').removeClass('green').addClass(cls);
  23.     }
  24.     </script>

  25. <div id="box" class="box"></div>
  26. <button onclick="changeCls('red')">red</button>
  27. <button onclick="changeCls('blue')">blue</button>
  28. <button onclick="changeCls('green')">green</button>
复制代码
结果:
在chrome下,点击三个按钮,分别出现对应的样式。
但是在IE6下,无论点击哪个按钮,div的样式不变,符合的样式规则都是:height: 100px; width: 200px; background: green; border: 3px dashed green;
注:IE6下有绿白相间的边框是因为CSS2指出背景只延伸到内边距,而不是边框。

IE6下的样式


运行示例:
ie6在IE6下,#a.x{background:red;} #a.y{background:blue;}  #a.z{background:green;} 最终的结果是:只有.red的元素的背景色会是red。而只有.green或.blue的元素没有背景色。只有第一条规则生效,后两条规则无效。
代码如下:
  1. <style type="text/css">
  2.     div{
  3.         height: 50px;
  4.         border: 1px solid #333;
  5.     }
  6.     .red#box{
  7.         background: red;
  8.         height: 100px;
  9.     }
  10.     .blue#box{
  11.         background: blue;
  12.         width: 200px;
  13.     }
  14.     .green#box{
  15.         background: green;
  16.         border: 3px dashed green;
  17.     }
  18.     </style>
  19.         <script type="text/javascript" src="http://s0.qhimg.com/lib/qwrap/1141.js"></script>
  20.     <script type="text/javascript">
  21.     function changeCls(cls){
  22.         W('div').removeClass('red').removeClass('blue').removeClass('green').addClass(cls);
  23.     }
  24.     </script>

  25. <div id="box"></div>
  26. <button onclick="changeCls('red')">red</button>
  27. <button onclick="changeCls('blue')">blue</button>
  28. <button onclick="changeCls('green')">green</button>
复制代码

结果:
在chrome下,点击对应的按钮就会有对应规则的样式。
但是在IE6下,只有点击red按钮,才会呈现.red#box的样式,点击其它按钮,只div的样式。

运行示例:
ie6


原文

友荐云推荐
回复

使用道具 举报

489

主题

0

好友

1764

积分

管理员

发表于 6 天前 |显示全部楼层
非是.a.x{ sRule; } 在IE6下表现怪异,而是IE6不支持多类选择器,之所以你能看到 .a.x{ sRule; }似乎生效了,那其实IE6将 .a忽略掉了,这是IE6的容错处理,防止用户误写一些选择器,但样式表仍然可以run
回复

使用道具 举报

手机版|Archiver|w3cvip.com  

GMT+8, 2013-2-12 10:02 , Processed in 0.046390 second(s), 22 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部