Question

我对HTML非常陌生，并且在使用Nivo Slider在Internet Explorer或iPhone中的网站上工作时遇到问题。我搜索了这个论坛（和其他人）或解决方案，但似乎没有什么对我有用。症状似乎很常见：图片不会加载。只是坐在那里，“装载”gif无休止地旋转。另外，该网站在Chrome和Android操作系统上按预期运行。当我使用Internet Explorer调试网站时，我收到错误“对象不支持属性或方法'nivoSlider'”，它与我的代码的第18行直接相关

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

这就是我对html的看法：

<head>
  <title>Recording Studio - Home</title>
  <meta name="description" content="Recording Studio" />
  <meta name="keywords" content="Recording Studio" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=9" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="js/jquery.ui.touch-punch.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</head>

<body>
  <div id="main">   
    <div id="site_content">
      <div id="site_heading">
        <h1>Sonic Debris Recording Studio</h1>  
        <h2>A modern vintage studio</h2>
      </div><!--close site_heading-->
      <div id="header">
        <div id="menubar">
          <ul id="menu">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="studio.html">Studio</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="clients.html">Clients</a></li>
            <li><a href="contact.html">Contact Us</a></li>
          </ul>
        </div><!--close menubar-->
      </div><!--close header-->
      <div id="banner_image">
        <div id="slider-wrapper">        
          <div id="slider" class="nivoSlider">
            <img src="images/consoleBW940.jpg" alt="" />
            <img src="images/gearBW.png" alt="" />
            <img src="images/drumBW.png" alt="" />
            <img src="images/boothBW.png" alt="" />
            <img src="images/bridgeBW.png" alt="" />
            <img src="images/booth2BW.png" alt="" />
          </div><!--close slider-->
        </div><!--close slider_wrapper-->
      </div><!--close banner_image-->

这是我的CCS

#slider-wrapper {
    height: 350px;
    padding-top: 10px;
    background: transparent;
    width: 940px;
}
#slider {
    background: url("../images/loading.gif") no-repeat scroll 50% 50% transparent;
    height: 350px;
    position: relative;
    width: 940px;
    border: 10px solid transparent;
}
#slider img {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}
#slider a {
    border: 0 none;
    display: block;
}

.nivoSlider {
    position: relative;
}
.nivoSlider img {
    left: 0;
    position: absolute;
    top: 0;
}
.nivoSlider a.nivo-imageLink {
    border: 0 none;
    display: none;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 6;
}
.nivo-slice {
    display: block;
    height: 100%;
    position: absolute;
    z-index: 5;
    top:0;
}
.nivo-box {
    display: block;
    position: absolute;
    z-index: 5;
    overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-caption {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    color: #FFFFFF;
    font-family: arial;
    left: 0;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
    z-index: 8;
}
.nivo-caption p {
    margin: 0;
    padding: 5px;
}
.nivo-caption a {
    color: red;
    display: inline !important;
    text-decoration: none;
}
.nivo-caption a:hover {
    color: blue;
    text-decoration: underline;
}
.nivo-html-caption {
    display: none;
}
.nivo-directionNav a {
    background: url("../images/arrows.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 30px;
    position: absolute;
    text-indent: -9999px;
    top: 45%;
    width: 30px;
    z-index: 9;
}
a.nivo-prevNav {
    left: 15px;
}
a.nivo-nextNav {
    background-position: -30px 50%;
    right: 15px;
}
.nivo-controlNav {
    bottom: -30px;
    left: 50%;
    margin-left: -40px;
    position: absolute;
}
.nivo-controlNav a {
    cursor: pointer;
    float: left;
    height: 22px;
    margin-top: 250px;
    position: relative;
    text-indent: -9999px;
    width: 22px;
    z-index: 9;
}
.nivo-controlNav a.active {
    background-position: 0 -22px;
}  

.sidebar_container
{ float: right;
  width: 220px;
  margin: 20px 10px 20px 0;}

.sidebar
{ float: right;
  width: 210px;
  padding-left: 10px;
  margin-bottom: 10px;}

.sidebar_item
{ font: normal 100% arial, sans-serif;
  padding: 0 15px 0 0;
  width: 201px;}

.sidebar h2
{ color: #fff;
text-shadow: 1px 1px #000;}  

.sidebar h4
{ font-size: 125%;
  color: #FFF;
  text-shadow: 1px 1px #000;}

.sidebar p
{ color: #FFF;}

.sidebar ul li, .sidebar ul li.selected
{ list-style: none; 
  margin: 15px 0;
  padding: 0;}

.sidebar li.selected, .sidebar li:hover
{ color: #5D5D5D;
  text-decoration: none;}

如果你能发现我的错误，请提前多多谢谢！

nivo滑块无法在IE或iPhone上运行

0 个答案: