Question

我一直在寻找答案，我无法找到我的困境的答案。问题可能很简单，但我一直在做噩梦。

我有一个使用jquery驱动的导航栏，当您将鼠标悬停并单击它时会更改背景图像。完成单击操作后，将显示另一个图像，并隐藏一个div并显示另一个图像。

代码在Firefox和Chrome中运行得非常好但是愚蠢的IE显示只是一个灰色条。当你点击栏上的某个地方时，div更改有效，所以我不确定那里有什么问题。

要查看该页面，请点击here

以下是代码：

            $(document).ready(function() {
            navigationPrimary();
            menuAction();

            $("#pagePlan").hide();
            $("#pagePortes").hide();
            $("#pageAutre").hide();

            function menuAction() {             
            $("#menu li.acceuil").click(function(){
                $("#main").show();
                $("#pagePlan").hide();
                $("#pagePortes").hide();
                $("#pageAutre").hide();
                $("#menu li.acceuil a").css("background-position","0px -100px");
                $("#menu li.plan a").css("background-position","-150px 0px");   
                $("#menu li.portes a").css("background-position","-300px 0px");
                $("#menu li.services a").css("background-position","-450px 0px");
                $("#header img.estim").show();
                return false;                       
            });


            $("#menu li.plan").click(function(){
                $("#main").hide();
                $("#pagePlan").show();
                $("#pagePortes").hide();
                $("#pageAutre").hide();
                $("#menu li.acceuil a").css("background-position","0px 0px");
                $("#menu li.plan a").css("background-position","-150px -100px");    
                $("#menu li.portes a").css("background-position","-300px 0px");
                $("#menu li.services a").css("background-position","-450px 0px");
                $("#header img.estim").hide();
                return false;                   
            });

            $("#menu li.portes").click(function(){
                $("#main").hide();
                $("#pagePlan").hide();
                $("#pagePortes").show();
                $("#pageAutre").hide();
                $("#menu li.acceuil a").css("background-position","0px 0px");
                $("#menu li.plan a").css("background-position","-150px 0px");   
                $("#menu li.portes a").css("background-position","-300px -100px");
                $("#menu li.services a").css("background-position","-450px 0px");
                $("#header img.estim").hide();      
                return false;                   
            });

            $("#menu li.services").click(function(){
                $("#main").hide();
                $("#pagePlan").hide();
                $("#pagePortes").hide();
                $("#pageAutre").show();
                $("#menu li.acceuil a").css("background-position","0px 0px");
                $("#menu li.plan a").css("background-position","-150px 0px");   
                $("#menu li.portes a").css("background-position","-300px 0px");
                $("#menu li.services a").css("background-position","-450px -100px");
                $("#header img.estim").hide();  
                return false;                       
            });
            }


        });

        function navigationPrimary() {
        $('#menu li').removeClass('hover');
        $('#menu li a')
            .css({ opacity: 1.0 })
            .mouseover(function() { 
                $(this).stop().animate({opacity: 0.0}, 300);
                })
            .mouseout(function() {
                $(this).stop().animate({opacity: 1.0}, 1000);
            });
        }

提前谢谢

Answer 1

看起来您的UL中的LI都是浮动的，但您没有清除浮动。尝试将此添加到您的CSS，然后将类clearfix添加到您的#menu ul

/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 

.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

html5boilerplate的Clearfix恭维

我的jquery导航栏没有出现在IE8中

1 个答案: