在IE7和IE8中将类添加到聚合和压缩的CSS问题

时间:2012-10-19 21:32:48

标签: jquery drupal compression aggregate

我正在运行Drupal,并启用了“聚合和压缩CSS文件”以及“聚合JavaScript文件”。我正在使用以下jQuery将一个类添加到其中一个元素中,这非常有效。

但是,当我启用“聚合并压缩CSS文件”时,IE7和IE8中不会出现所需的结果。它在Firefox,Safari和Chrome中运行良好。

Drupal动态生成压缩的CSS并将其放在新目录中。

这是我的jQuery:

(function ($, Drupal, window, document, undefined) {


    $(document).ready(function(){
        // ADD CLASS TO MAIN MENU ITEM WHEN CHILD UL IS HOVERED //
        $("#menu-218-1 ul").hover( 
            function(){ $("li#menu-218-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-218-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-539-1 ul").hover( 
            function(){ $("li#menu-539-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-539-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-540-1 ul").hover( 
            function(){ $("li#menu-540-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-540-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-545-1 ul").hover( 
            function(){ $("li#menu-545-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-545-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-546-1 ul").hover( 
            function(){ $("li#menu-546-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-546-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-547-1 ul ").hover( 
            function(){ $("li#menu-547-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-547-1 a.sf-depth-1").removeClass('submenu_hover') }
        )

    });


})(jQuery, Drupal, this, this.document);

这是我的CSS:

.submenu_hover {
    background:  #888888 url(../images/arrow.png) no-repeat 97px 0px;
    border-left: #888888 solid 9999px;
    margin-left: -9999px;
} 

.lt-ie8 .submenu_hover {
    background:  #888888 url(../images/arrow.png) no-repeat 97px 0px;
    border-left: #888888 solid 9999px;
    margin-left: -960px;
}

1 个答案:

答案 0 :(得分:0)

尝试验证聚合和非聚合CSS。您显示的行上方可能存在语法错误导致跳过它们。

即使它似乎与CSS有关,但尝试在每次.hover()调用后添加分号。缺乏可能会使JS压缩机瘫痪。从技术上来说,它们是可选的,但如果压缩JS将行合并为一行,则可能需要使用分号。

有线的说法是正确的 - 但添加一个类可能需要php或使用菜单属性模块。