前端技术分享论坛

标题: 多类选择器背景定位backgroud-position ie6下显示错误！ [打印本页]

作者: phpvar 时间: 2013-8-29 23:44
标题: 多类选择器背景定位backgroud-position ie6下显示错误！
多类选择器背景定位backgroud-position ie6下显示错误！首先得确认的是：形如.p1.on这样的多类选择器，兼容所有浏览器包括奇葩的ie6!!

问题css源码如下：
.links .column .on,.links .column a:hover{background:url(nav_hover.jpg) no-repeat;}
.links .column .p1.on,.links .column .p1:hover{ background-position:-20px -12px;}
.links .column .p2.on,.links .column .p2:hover{ background-position:-20px -64px;}
.links .column .p3.on,.links .column .p3:hover{ background-position:-20px -113px;}
.links .column .p4.on,.links .column .p4:hover{ background-position:-20px -163px;}
.links .column .p5.on,.links .column .p5:hover{ background-position:-308px -12px;}
.links .column .p6.on,.links .column .p6:hover{ background-position:-308px -64px;}
.links .column .p7.on,.links .column .p7:hover{ background-position:-308px -113px;}
.links .column .p8.on,.links .column .p8:hover{ background-position:-308px -163px;}

.on 表示当前点击项会添加的class名，根据这个这个class名给点击项加高亮背景定位显示;其它浏览器都显示正常，唯独ie6 在加上on选择器时会以最后一个背景定位为标准【.links .column .p8.on】
解决方法：把.on在样式定义中提前即可！！！
改后的css样式：

.links .column .on.p1,.links .column .p1:hover{ background-position:-20px -12px;}
.links .column .on.p2,.links .column .p2:hover{ background-position:-20px -64px;}
.links .column .on.p3,.links .column .p3:hover{ background-position:-20px -113px;}
.links .column .on.p4,.links .column .p4:hover{ background-position:-20px -163px;}
.links .column .on.p5,.links .column .p5:hover{ background-position:-308px -12px;}
.links .column .on.p6,.links .column .p6:hover{ background-position:-308px -64px;}
.links .column .on.p7,.links .column .p7:hover{ background-position:-308px -113px;}
.links .column .on.p8,.links .column .p8:hover{ background-position:-308px -163px;}

问题就是这样解决的，ie6够吭爹吧？！！！

欢迎光临前端技术分享论坛 (https://www.phpvar.com/bbs/)