用属性选择符来解决IE跟FF的兼容性问题

Ghostzhang 发表于

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

效果展示

从上面的例子可以看到,在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,即不能达到将样式定义分开的目的。

讨论