深山老林

2006-04-24[原]用属性选择符来解决IE跟FF的兼容性问题

从之前写过的《[原]属性选择符的使用》中发现了一个可以用来解决IE跟FF兼容性的问题，因为IE不支持CSS的属性选择符。下面来看看可以怎么做：

---------------------------HTML-------------------------------------
<div class="left">
  <dl>
   <dd>dd1</dd>
   <dd>dd2</dd>
   <dd>dd3</dd>
  </dl>
</div>
<div class="right">
  <dl>
   <dd>dd4</dd>
   <dd>dd5</dd>
   <dd>dd6</dd>
  </dl>
</div>
--------------------------------------------------------------------

---------------------------CSS-------------------------------------
/*IE*/
div{width:200px;height:300px;float:left;}
.left{color:Aqua;}
.right{color:Fuchsia;}

/*FF*/
div[class=left]{color:Blue;}
div[class=right]{color:Gray;}
--------------------------------------------------------------------

从上面的例子可以看到，在IE中二个层里的文字颜色跟在FF中的文字颜色是不一样的，也就是说可以使用属性选择符来来写针对FF的样式。

可能你会说用!important声明提高样式的优先级不就完了吗，用属性选择符来为FF写样式意义不大。使用!important声明的确是比较方便，但IE6也认识这个声明，也就是说如果你给FF写了!important声明，那就得再为IE写一个样式来还原默认值，才能让IE6也显示正常。使用属性选择符就不会有这样的问题，而且可以将多个定义写到一起，是不是比较方便呢？看看下面的样式：

---------------------------使用声明----------------------------------
div.try{
  width:200px !important;
   width:204px;
  height:300px !important;
   height:304px;
   padding:2px;
}
--------------------------------------------------------------------

---------------------------使用属性选择符----------------------------
div.try{
   width:204px;
   height:304px;
   padding:2px;
}
div[class=try]{
   width:200px;
   height:300px;
}
--------------------------------------------------------------------

这里的属性选择符最好不要使用ID为属性。在《[原] CSS样式的优先级补遗2》及《[原]属性选择符的优先级》中我们了解到，ID选择符的特性值为100，而属性选择符的特性值为11，即不能达到将样式定义分开的目的。