个人中心
gpt4 book ai didi

JQuery Cycle 插件在 IE 中不起作用 - 谁可以提供帮助？

转载 作者：行者123 更新时间：2023-12-01 07:36:06 28 4
gpt4 key购买 nike

我目前正在为客户开发一个网站，该网站使用 JQuery 循环插件来浏览多个包含婚纱图片和信息的 div。

在 Firefox 中一切正常，但当我在 IE6 + IE7 中测试时，div 全部垂直堆叠在一起，并且它们在屏幕上向下移动 1000 个像素。

对我来说，这似乎是绝对/相对定位或 z-index 的问题，我还在子 div 中使用了一些 float 。我还使用 SIFR 进行文本替换，这可能会发生冲突吗？

这是我的代码，任何人都可以看到导致我的循环无法在 IE 中运行的问题吗？

<小时/>

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Wedding Dresses ~ Cavendish Bridal House</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/sifr.css" type="text/css" media="screen" />  

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />    
<![endif]-->

<!--[if lt IE 7]>
 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" 
 type="text/javascript">
 </script>

 </script>
<![endif]-->

<script src="js/sifr.js" type="text/javascript"></script>  
<script src="js/sifr-config.js" type="text/javascript"></script>    
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function initMenu() {
    $('#menu ul').hide();
    $('#menu ul#dressessub').show();
    $('#menu li a').click(
    function() {
    var checkElement = $(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    return false;
    }
   if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
   $('#menu ul:visible').slideUp('normal');
   checkElement.slideDown('normal');
   return false;
   }
   }
   );
   }
   $(document).ready(function() {initMenu();});
</script>

<script type="text/javascript">
$(document).ready(function() {
$('#wedding-dresses').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' ,
    }); 
    }); 
</script>



</head>

<body id="wedding-dress">

<div id="page-outer">
<div class="container_12" id="page">

<div class="grid_12" id="header">

         <div id="logo">
            <a href="index.html" class="logo" title="Cavendish Bridal House">Cavendish Bridal House Hayfield</a>        </div><!--end logo-->
</div><!--end header-->
<div id="content">
<div id="label">
  <ul id="menu">
                           <li><a href="index.html" id="home" title="Home" >Home</a></li>
                           <li><a href="georgia.html" id="georgia"  title="Georgia">Georgia</a></li>
                           <li><a href="the-shop.html" id="shop"  title="The Shop">The Shop</a></li>
                           <li class="headlink"><a href="#" id="your-dress"  title="Your Dress">Your Dress</a>
                                   <ul>
                                        <li><a href="what-to-expect.html" title="What to expect" id="expect">What to expect</a></li>
                                        <li><a href="ordering-your-dress.html" title="Ordering your dress" id="ordering" >Ordering your dress</a></li>
                                        <li><a href="alterations.html" title="Alterations" id="alterations" >Alterations</a></li>
                                        <li><a href="collections.html" title="Collections" id="collections" >Collections</a></li>
                                   </ul>
                           </li>

                           <li class="headlink"><a href="dresses.html" id="dresses"  title="Dresses">Dresses</a>
                           <ul id="dresses-sub">
                                <li><a href="wedding-dresses.html" id="wedding"  title="Wedding Dresses">Wedding Dresses</a></li>
                                <li><a href="bridesmaid-dresses.html" id="bridesmaid" title=" Bridesmaid Dresses">Bridesmaid Dresses</a></li>
                                <li><a href="prom-dresses.html" id="prom"  title="Prom Dresses">Prom Dresses</a></li>
                             </ul>
                           </li>    
                          <li><a href="accessories.html" id="accessories" title="Accessories">Accessories</a></li>
                          <li><a href="mens-formal-hire.html" id="formal"  title="mens Formal Hire">Mens Formal Hire</a></li>
                          <li><a href="my-brides.html" id="my-brides"  title="My Brides">My Brides</a></li>
                          <li><a href="events.html" id="events"  title="Events">Events</a></li>
                          <li><a href="contact.php" id="contact"  title="Contact">Contact</a></li>
                          <li><a href="press.html" id="press"  title="Press">Press</a></li>
                          <li><a href="links.html" id="links"  title="Links">Links</a></li>
        </ul>
                  <div class="clear"></div>
      </div>
<div id="right">

    <div id="gallery">
    <div class="nav"><a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a></div>

<div id="wedding-dresses">
       <div class="panel" id="felice"> 
 <img src="img/wedding-dresses/felice.png" width="331" height="437" alt="Felice"/>
        <div class="description">
            <h3 class="range">Felice</h3>
            <p>Felice is an extraordinary strapless slim A-line gown made of lavish lace. It features a ruched Empire bust line ornamented with hand-beaded embellishment, asymmetrical side draped midriff and functional corset back with a chapel train..</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
        <div class="accessory">
            <img src="img/accessories/waistcoats/embroided-slate-swirl.png" width="109" height="110" alt="Embroided Slate Swirl Waistcoat"  />
            <p>Embroided Slat Swirl Waistcoat </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/necklace-1.png" width="109" height="84"  alt="necklace"/>
            <p>Necklace</p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end felice panel-->

          <div class="panel" id="julianne"> 
      <img src="img/wedding-dresses/julianne.png" width="331" height="437" alt="Julianne"/>
        <div class="description">
            <h3 class="range"> Julianne</h3>
            <p>Crafted from taffeta, extraordinary strapless A-line gown, Julianne features a crisscross woven bodice embellished with delicate hand-beaded and embroidered appliqués. Julianne’s functional corset back, A-line skirt and embellished chapel train create an exquisite look.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
        <div class="accessory">
            <img src="img/accessories/waistcoats/black-quill.png" width="109" height="110"  alt="Black Quill Waistcoat" />
            <p>Black Quill Waiscoat </p>
         </div> <!--end accessory-->
         <div class="accessory">
            <img src="img/shoes/bridal-lady.png" width="109" height="84" alt="Bridal Shoes" />
            <p>Lady Bridal Shoes </p>
         </div>   <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end julianne panel-->

              <div class="panel" id="renee"> 
      <img src="img/wedding-dresses/renee.png" width="331" height="437" alt="Renee"/>
        <div class="description">
            <h3 class="range">Renee</h3>
            <p>This alluring sequined lace over luxurious satin strapless ball gown features a crisscross sweetheart neckline enhanced with a lavish hand-beaded Empire waistline.  The feminine sequined lace gathers at the hip and flows down the chapel length train from the functional corset back. </p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
        <div class="accessory">
            <img src="img/accessories/waistcoats/champagne-quill.png" width="109" height="110"  alt="Champagne Quill Waistcoat"/>
            <p>Champagne Quill Waistcoat </p>
         </div> <!--end accessory-->
         <div class="accessory">
            <a href="accessories.html#jewellery"><img src="img/accessories/ivory-pearl-earings.png" width="109" height="84"  alt="Ivory Pearl Earings"/></a>
            <p>Ivory Pearl Earrings </p>
         </div>   <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end renee panel-->

                  <div class="panel" id="susanne"> 
      <img src="img/wedding-dresses/susanne.png" width="331" height="437" alt="Susanne"/>
        <div class="description">
            <h3 class="range">Susanne</h3>
            <p>The elegance of Susanne is revealed through a uniquely A-line silhouette. The asymmetrical draped bodice features a strapless sweetheart neckline and is detailed with hand-beaded lace motifs.  Susanne also includes a functional corset back with a chapel train.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
              <div class="accessory">
            <img src="img/shoes/bridal-mellow.png" width="109" height="84"  alt="Mellow Bridal Shoes"/>
            <p>Mellow Bridal Shoes. </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/diamante-pearl-earings.png" width="109" height="84"  alt="Diamante Pearl Earings" />
            <p>Diamante Pearl Earrings </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end suanne panel-->

                      <div class="panel" id="emilie"> 
      <img src="img/wedding-dresses/emilie.png" width="331" height="437" alt="Emilie"/>
        <div class="description">
            <h3 class="range">Emilie</h3>
        <p>This imperial two-piece strapless luxurious satin gown offers a side gathered bodice accentuated with soft hand-beaded lace motifs.  Emilie’s gorgeous crisscross draping at the hip effortlessly flows into the chapel length train. A detachable lace over illusion modesty piece with back covered buttons creates a higher neckline and three-quarter length sleeves.  A functional corset back completes the flattering and elegant look.</p>
<div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/waistcoats/brown-swirl.png" width="109" height="110"  alt="Brown Swirl Waiscoat"/>
            <p>Brown Swirl Waiscoat </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/necklace-1.png" width="109" height="84"  alt="Necklace"/>
            <p>Necklace </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end emilie panel-->

                          <div class="panel" id="titiana"> 
      <img src="img/wedding-dresses/titiana.png" width="331" height="437" alt="Titiana"/>
        <div class="description">
            <h3 class="range">Titiana</h3>
            <p>Crafted from sumptuous satin, Titiana presents a stunning A-line silhouette with an asymmetrical draped bodice tat spills around the bodice, emphasised by hand-beaded appliqués. The corset back is concealed with a hand-beaded organza overlay. Pleats in the back of the skirt along with the chapel length train completes the look for this grand dame of the season.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/bracelet-2.png" width="109" height="84" alt="Bracelet" />
            <p>Bracelet</p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/tiara-1.png" width="109" height="84"  alt="Tiara" />
            <p>Tiara </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end titiana panel-->

                              <div class="panel" id="diana"> 
      <img src="img/wedding-dresses/diana.png" width="331" height="437" alt="Diana"/>
        <div class="description">
            <h3 class="range">Diana</h3>
            <p>Modern elegance resonates from this classic A-line satin gown. Diana displays a decadent lace bateau neckline and lace appliqués ornament the draped bodice, lower skirt and chapel train. The scoop back bodice features a back zipper concealed with buttons.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/bracelet-3.png" width="109" height="84"  alt="Bracelet" />
            <p>Bracelet </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/shoes/bridal-paradise.png" width="109" height="84"  alt="Paradise Bridal Shoes" />
            <p>Paradise Bridal Shoes</p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end diana panel-->

                                  <div class="panel" id="beth"> 
      <img src="img/wedding-dresses/beth.png" width="331" height="437" alt="Beth"/>
        <div class="description">
            <h3 class="range">Beth</h3>
            <p>Individually styled Beth will transform any bride into a goddess. This sleek strapless charmeuse A-line gown features an elaborate hand-beaded insert at the neckline, lightly gathered bust detail and intricately hand-beaded accents on the bodice and across the skirt. Beth’s chapel length train also features matching hand-beading with a corset back.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/necklace-1.png" width="109" height="84"  alt="Necklace"/>
            <p>Necklace. </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/ivory-pearl-earings.png" width="109" height="84" alt="Ivory Pearl Earings"  />
            <p>Ivory Pearl Earrings </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end beth panel-->

      <div class="panel" id="petra"> 
      <img src="img/wedding-dresses/petra.png" width="331" height="437" alt="Petra"/>
        <div class="description">
            <h3 class="range">Petra</h3>
            <p>The epitome of elegance and sophistication, Petra is a modern-day mermaid satin gown with sweetheart neckline. The extraordinary hand-beaded cap sleeve creates an illusion of decadence and trails into an open beaded back bodice with corsets. To add to the overall look, an embroidered insert accents the chapel length train.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/waistcoats/ivory-waterfall.png" width="109" height="110"   alt="Ivory Waterfall Waistcoat"/>
            <p>Ivory Waterfall Patterned Waiscoat </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/shoes/bridal-mellow.png" width="109" height="84"  alt="Mellow Bridal Shoes" />
            <p>Mellow Bridal Shoes</p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end petra panel-->

     <div class="panel" id="fabiana"> 
   <img src="img/wedding-dresses/fabiana.png" width="331" height="437" alt="Fabiana"/>
        <div class="description">
            <h3 class="range">Fabiana</h3>
            <p>This fabulous lace is overlaid on an elegant fishtail shaped dress. The detail on the lace really makes such a simple dress very glamorous. With the dress comes a fantastic lace detailed short jacket with close fitting sleeves and is enhanced with lace covered button flowing down the arms that match the buttons on the back of the dress.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
         <div class="accessory">
            <img src="img/accessories/waistcoats/ivory-stripe.png" width="109" height="110"  alt="Ivory Stripe Waistcoat"/>
            <p>Ivory Stripe Waistcoat </p>
         </div> <!--end accessory-->
               <div class="accessory">
            <img src="img/accessories/tiara-1.png" width="109" height="84" alt="Tiara" />
            <p>Tiara </p>
         </div>   <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end fabiana panel-->

   <div class="panel" id="fifi"> 
      <img src="img/wedding-dresses/fifi.png" width="331" height="437" alt="Fifi"/>
        <div class="description">
            <h3 class="range">Fifi</h3>
            <p>A stunning plain ivory satin dress with puff ruche skirts that has been detailed with small ivory roses. This gown is enhanced with a coloured sash around the waist for a final finishing touch.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/beatrix.png" width="109" height="110"  alt="Beatrix"/>
            <p>Beatrix Bridesmaid Dress </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/betsy.png" width="109" height="110" alt="Betsy"  />
            <p>Betsy Childs Bridesmaid Dress </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end fifi panel-->

       <div class="panel" id="petal"> 
      <img src="img/wedding-dresses/petal.png" width="331" height="437" alt="Petal"/>
        <div class="description">
            <h3 class="range">Petal</h3>
            <p>The princess line dress gives way to a wonderful puff ruche on the skirt. Tiny embroidered and beaded flowers adorn the dress and makes exquisite detailing. To finish off the overall look are a set of very delicate shoulder edged straps.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/fabia.png" width="109" height="110"  alt="Fabia"/>
            <p>Fabia Bridesmaid Dress. </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/tiara-2.png" width="109" height="84"  alt="Tiara"/>
            <p>Tiara </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end fifi petal-->
    </div><!-- end wedding-dresses-->
</div><!--end gallery-->
</div>
<!-- end right-->
</div><!--end content-->

<div   id="footer">
            <p class="fltlt">            </p>
            <p class="fltrt">
                <a href="http://www.firstimpression.co.uk/websites.php" title="Web design in Glossop">Web design</a> by <a href="http://www.firstimpression.co.uk" title="First Impression Glossop">First Impression</a>            </p>
        </div>  
   </div><!-- end page -->     
    </div>    
</body>
</html>
<小时/>

CSS - 仅相关内容

#page-outer{width:816px; height:550px; background: url(../img/page-outer-bg.png) no-repeat; position:relative; background-position:0 10px; padding-top:50px; margin:0 auto;}
#home #page{background:url(../img/page-bg.png) no-repeat; position:relative; background-position:40px 0; width:912px; top:-103px; left:-20px; height:650px;}
#page{background:url(../img/page-bg-2.png) no-repeat; position:relative; background-position:40px 0; width:912px; top:-103px; left:-20px; height:650px;}

#content{height:100%;}

#right{width:600px; margin-left:5px;  float:left; position:relative; top:120px;}
#right p{ color:#808080; font-size:14px; line-height:18px; margin-bottom:10px; padding-left:5px; width:330px; }

#footer{width:750px; height:50px; margin:0 auto; position:relative; padding-top:3px;}
#footer p {color:#808080; font-size:10px;}
#footer p a{color:#808080; font-size:10px;}

#gallery{background:url(../img/gallery-bg3.png) no-repeat; background-position:right; position:relative; margin-top:-30px;}
.panel .nav,  #gallery .nav{ width:50px; height:20px; margin-left:10px;}

div.panel {  padding: 0;  height: 500px;  width: 600px; }
div.panel img{float:left; margin-top:10px; margin-right:5px;}
div.description{float:left; width:255px; margin-top:35px; position:relative;}
#right div.panel div.description p{float:left; width:235px; font-size:11px; line-height:17px; padding-left:0; }

div.description div.recommendations{float:left; width:255px; margin-top:5px; position:relative; top:30px;}
#right div.description div.recommendations h3{margin-top:0;}

#right  div.description div.recommendations .accessory{height:100px; width:240px; margin-bottom:10px;}
#right div.description div.recommendations .accessory p{margin-top:5px; width:125px; height:90px; overflow:visible;}
#right  div.description div.recommendations .accessory img{float:right; margin-top:0;margin-right:3px;}

.nav a#prev{ background:url(../img/accessories/prev.png); text-indent:-9999px; float:left; width:15px; height:15px; margin-right:5px; cursor:pointer;}
 .nav a#next{ background:url(../img/accessories/next.png); text-indent:-9999px;float:left; width:15px; height:15px; margin-right:5px; cursor:pointer;}

div.bride{margin:30px 0 0 0; width:520px;}
div.bride img{float:right; margin-top:-20px;}

感谢您的帮助，这现在开始伤害我的头了! :(

丹

最佳答案 

$('#wedding-dresses').cycle({ 
fx:     'fade', 
speed:  'fast', 
timeout: 0, 
next:   '#next', 
prev:   '#prev' ,
}); 
});

尝试删除“prev: '#prev' 之后的最后一个逗号。IE 无法忍受对象中的尾随逗号。

关于JQuery Cycle 插件在 IE 中不起作用 - 谁可以提供帮助？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1542637/

28 4 0
文章推荐： jquery - 多页 jQuery 图片库
文章推荐： python - 为什么下面的模式程序没有给出所需的输出？
文章推荐： jquery - 在 jQuery 中选择具有属性值的元素类型
文章推荐： jquery - 执行基于条件CSS样式的jquery命令？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com