Question

我的代码与IE以外的所有浏览器完美配合。我尝试了在论坛上找不到运气的所有解决方案。我还在学习JavaScript，所以我稍后会学习jQuery。问题是在IE中幻灯片垂直显示而没有效果。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="stylesheet...css" rel="stylesheet" type="text/css" />

    <title>div test</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.bxSlider.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            var slider = $('#slider1').bxSlider({
                controls: false
            });

            $('#bx-prev').click(function () {
                slider.goToPreviousSlide();
                return false;
            });

            $('#bx-next').click(function () {
                slider.goToNextSlide();
                return false;
            });
        });
    </script>
</head>

<body>
    <div id="slider1">
        <div>
            <div id="wrapper">
                <div id="head"><img alt="logo" align="left" src="logo.png"/></div>
                <div id="main"> <div id="content">content</div> </div>
                <div id="rash"><img alt="r" align="middle" 
                                    style="position:relative;top:-70px;" 
                                    src="image1.png"/></div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div>
            <div id="wrapper">
                <div id="head"><img alt="logo" align="left" src="logo.png"/></div>
                <div id="main"> <div id="content">content</div> </div>
                <div id="rash"><img alt="r" align="middle" 
                                    style="position:relative;top:-70px;"
                                    src="image1.png"/></div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div>page3</div>
        <div>page4</div>
    </div>
    <div id="bx-next">next</div>
    <div id="bx-prev">prev</div>
</body>
</html>

这是我的样式表：

div#head {
    width:100%;
    height:100px;
    /*background-color:antiquewhite;*/
    margin-bottom:100px;
}

div#content {
    border-left: 2px solid #F0F8FF;
    border-right: 2px solid #8a815d;
    border-top: 2px solid #8a815d;
    border-bottom: 2px solid #8a815d;
    width:400px;
    height:300px;
    -webkit-border-radius: 0px 28px 20px 0px;
    -moz-border-radius: 0px 28px 20px 0px;
    border-radius: 0px 28px 20px 0px;
    font-family:Arial,Helvetica,sans-serif;
    color:#8a815d;
    padding-left:100px;
    background-color:#F0FFFF;
    background-color: rgba(215,227,211,0.3);
    position:relative;
    top:20px;
    left:0px
}


div#wrapper {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
}

div#main {
    /* background-color:black;*/
    width:50%;
    height:360px;
    float:left;
}

div#rash {
    float:right;
    /*background-color:blue;*/
    height:360px;
    width:50%;
}

body {
    background-color: #E8F3F9;
    background-image: url('squares layer.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

/*next button*/
#bx-next {
    position:absolute;
    top:45%;
    right:3px;
    z-index:998;
    width: 30px;
    height: 30px;
    text-indent: -999999px;
    background: url(gray_next.png) no-repeat 0 -30px;
}

/*previous button*/
#bx-prev {
    position:absolute;
    top:45%;
    left:4px;
    z-index:998;
    width: 30px;
    height: 30px;
    text-indent: -999999px;
    background: url(gray_prev.png) no-repeat 0 -30px;
}

Answer 1

我也有类似的问题，我还没有得出结论，但到目前为止我已经想到的是，要调试这个问题，你应该从验证你的代码开始。 http://validator.w3.org/我复制了你的代码，它说你有5个错误所以我认为一个开始就是修复这些错误，因为IE非常挑剔，如果你有任何错误，如果可能影响你的格式。另外我知道IE对你的代码顶部的Doc Type很挑剔，如果它不正确，它也会影响页面的格式。如果我能解决我的类似问题，我会告诉你，因为你很可能遇到同样的问题。

Answer 2

<div id="wrapper">定义了两次。对于您网页上的每个元素，ID都必须是唯一的。 <div id="head">，<div id="main">，<div id="content">和<div id="rash">也是如此。

另外，您是否尝试在IE控制台中进行调试？尝试查看控制台是否在运行时记录任何错误。然后回到SO并发布这些错误。

干杯。

jQuery Slider在IE中不起作用

2 个答案: