IE6下CSS多类选择符的问题

时间: 2010-10-11 - 分类: Html+CSS - 评论: 2 - 阅读: 1,270 次

IE6…这个前端开发的梦魇总是在你不经意的时候给你捅一刀.这次碰到的问题是CSS多类选择符的问题。IE6不支持。我们来看一段这样简单的代码：

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


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>IE6多类</title>


<style type="text/css">


div{display:block;width:400px;height:200px;}


#id1.c1{background:#ccc;}


.c2.c3{border:1px solid red;}


</style>


</head>


<body>


<div id="id1" class="c1">


a


</div>


<div id="id2"  class="c2 c3">


b


</div>


</body>


</html>

形如#id1.c1的选择符，支持性很好，IE6及以上，ff,opera,safari等浏览器都支持。形如.c2.c3的选择符，在IE6下不支持，后一个类名会覆盖前一个类名，即直接识别为.c3

所以开发中用多类来组合实现css效果的时候,注意IE6的这个问题。最好的方法就是，不要用类组合的形式。

2 个评论

  1. 匿名 - 2011年1月4日 3:09 下午

    多类来组合.c2.c3 IE6-8都是不持支的..

  2. Coki - 2010年12月8日 11:45 下午

    今天我被IE6捅了……

发表评论