日期:2014-05-17  浏览次数:20553 次

IE6下CSS样式无效问题

    这两天被一个CSS问题纠结了很久,代码很简单,就是写一个有收起功能的分隔栏:

    <div id="splitbar" class="expand" onclick="foldMenu();"></div>

    当收起的时候,splitbar的class="fold",CSS如下:

    #splitbar.expand{
        ....
        background-image:url(arrow.gif);
        background-position:1px center;
        background-repeat:no-repeat;
    }
    #splitbar.fold{
        ....
        background-image:url(arrow.gif);
        background-position:-10px center;
        background-repeat:no-repeat;
    }


    可是不知为什么,用IE查看,当样式为fold时,样式一直加载不了(用IE插件看样式确实没起作用),而用FF等其他浏览器查看是好的。由于我用的是IE6,于是今天借同事电脑看了下,发现IE8下显示也没问题,基本确定是IE6的问题。

    后来我把expand和fold的样式换了下位置,把fold放在前面,发现fold的样式加载进来了,expand却无效了,我考虑了一下,估计和样式前面加上元素ID做限制有关,可能是IE6下面,用ID做了限制后,先定义的样式会把后面的样式阻栏。于是我把"#splitbar"去掉,问题果然就解决了。