Fatal编程技术网
  • javascript/
  • Javascript jQuery滑块没有'；我不在IE工作

Javascript jQuery滑块没有'；我不在IE工作

javascript jquery html css

Javascript jQuery滑块没有'；我不在IE工作,javascript,jquery,html,css,slider,Javascript,Jquery,Html,Css,Slider,我的代码在除IE之外的所有浏览器上都能完美运行。我在论坛上找到的所有解决方案都试过了，但没有成功。我还在学习JavaScript，所以稍后我将学习jQuery。问题是在IE中，幻灯片垂直显示，没有效果。这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

我的代码在除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>
我也有一个类似的问题，我还没有得出结论，但从我到目前为止发现的是，要调试这个问题，您应该从验证代码开始。我复制了你的代码，它说你有5个错误，所以我认为首先应该修复这些错误，因为IE非常挑剔，如果你有任何错误，if可能会影响你的格式。我还知道IE对代码顶部的文档类型很挑剔，如果它不正确，也会影响页面的格式。如果我能解决类似的问题，我会让你知道，因为它很可能与你遇到的问题相同。

定义了两次。对于页面上的每个元素，ID都必须是唯一的。
、
、
和
也是如此

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

干杯。

控制台中有错误吗？你能在JSFIDLE.net上发布你的代码吗？它说你的JS代码是有效的。我想你还没有为这个插件实现正确的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;
}