IE6下CSS多类挑选符优先选择级不起功效的bug剖析

日期:2020-10-23 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

IE6,这个前端开发开发设计的梦魇一直在你无意间的情况下给你捅1刀。这次碰到的难题是CSS多类挑选符的难题。IE6不适用,大家看来1段这样简易的编码:

拷贝编码
编码以下:

<!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⑻" />
<title>IE6多类挑选符优先选择级不起功效的bug</title>
<style type="text/css">
div{display:block;width:400px;height:200px;}
#id1.c1{background:#ccc;}
.c2.c3{border:1px solid red; /* 边框鲜红色 */}
.c3{border:1px dashed #00F; /* 边框蓝色 */}
</style>
</head>
<body>
<div id="id1" class="c1">a</div>
<div id="id2" class="c2 c3">b</div> <!--IE6下,边框为蓝色,别的访问器都为鲜红色-->
</body>
</html>

形如 #id1.c1 的挑选符,适用性很好,IE6及以上,Firefox,opera,safari等访问器都适用。形如 .c2.c3 的挑选符,在IE6下不适用,后1个类名会遮盖前1个类名,即立即鉴别为 .c3 ,也便是说,IE6下这类类组成的优先选择级比不上单独类。

因此开发设计选用多类来组成完成css实际效果的情况下,留意IE6的这个难题。最好是的方式便是,不必用这类类组成的方式。
案例2:

提醒:您能够先改动一部分编码再运作

形如#first.son的挑选符,适用性很好,ie6及以上,ff,opera,safari等访问器都适用。
形如.second.son的挑选符,在ie6下不适用,后1个类名会遮盖前1个类名,即立即鉴别为.son

实际上能够运用第2条状况,做为1个对于ie6的hack来应用:
.xxx.son{} 要是.xxx一部分是1个不存在的类名。便可以屏蔽ie6以外的访问器。只对ie6下的.son合理。
这个hack的实际效果同 selector{ _property:value; } 大致1致。