Jquery 在ie8上的html文档末尾追加div

我用jQuery编写了一个带有背景图像的分层菜单，它在包括ie8在内的所有浏览器上都能正常工作，代码如下：

jQuery(document).ready(function () {

    $("#mainMenu ul li").css('background-image', 'url(images/nav/menuItem.png)');
    $("#mainMenu ul li:first-child").css('background-image', 'url(images/nav/menuFirst.png)');
    $("#mainMenu ul li:last-child").css('background-image', 'url(images/nav/menuLast.png)');

    $('#mainMenu ul li:first-child').append('<div class="first"></div>');
    $('#mainMenu ul li:last-child').append('<div class="last"></div>');
    //All Items other than the first and the last
    $('#mainMenu ul li:not(:first-child, :last-child)').append('<div class="item"></div>');


    $('nav#mainMenu ul li').hover(

        function() {

            $(this).children('div').stop(true,true).fadeIn('500');
            $(this).children( "a" ).stop(true,true).animate({color: hoverColour},200);  
        }, 


        function() {

            $(this).children('div').stop(true,true).fadeOut('500'); 
            $(this).children( "a" ).stop(true,true).animate({color: "white"},200);      

    });

});

jQuery（文档）.ready（函数（）{
$（“#主菜单ul li”）.css（'background-image'，'url（images/nav/menuItem.png）'）；
$（“#主菜单ul li:first child”）.css（'background-image'，'url（images/nav/menuFirst.png）'）；
$（“#主菜单ul li:last child”）.css（'background-image'，'url（images/nav/menuLast.png）'）；
$（'#主菜单ul li:first child'）。附加（''）；
$（“#主菜单ul li:最后一个子菜单”）.append（“”）；
//除第一项和最后一项以外的所有项目
$（“#主菜单ul li:not（：first child，：last child）”）。附加（“”）；
$（'nav#主菜单ul li'）。悬停(
函数（）{
$（this.children（'div'）.stop（true，true.fadeIn（'500'）；
$（this.children（“a”）.stop（true，true）.animate（{color:hovercolor}，200）；
}, 
函数（）{
$（this.children（'div'）。stop（true，true）。fadeOut（'500'）；
$（this.children（“a”）.stop（true，true）.animate（{color:“white”}，200）；
});
});

问题是ie8在html文件的末尾附加了div，请看屏幕截图

---

问题可能涉及最后一个子和第一个子选择器。看看这个。你试过jQuery的

.first（）

和

.last（）

操作符吗？

你能用一个或类似的演示演示来演示这个行为吗？我删除了第一个子和最后一个子操作符，thsi仍然存在。我试过：$（“#main menu ul li”）.css（'background-image'，'url（images/nav/menuItem.png）'）；$（“#主菜单ul li:not（：first child，：last child）”）。附加（“”）；$（'nav#main menu ul li'）。悬停（function（）{$（this）。children（'div'）。停止（true，true）。fadeIn（'500'）；}，function（）{$（this）。children（'div'）。停止（true，true）。fadeOut（'500'）；}）；试试这个：$（“#main menu ul li”）.first（）.css（'background-image'，'url（images/nav/menuItem.png））；不，那没用！但是删除条件语句：解决了问题！这意味着html5shiv.js就是问题所在！我使用html5shiv.js作为解决方案，因为在ie9之前，internet explorer不支持HTML5标记