我目前正在为一个客户开发一个网站，该网站使用JQuery循环插件来浏览一些div，其中包含有关婚纱的图片和信息。
所有在Firefox中工作正常，但是当我在IE6 + IE7中测试时，div都是垂直堆叠在一起的，并且它们在屏幕上向下移动1000像素。
对我而言，这似乎是绝对/相对定位或z-index的问题，我还在子div中使用了一些浮点数。 我也在使用SIFR进行文本替换，这可能会有冲突吗？
这是我的代码，任何人都可以看到一个问题，导致我的循环无法在IE中运行。？
<!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>
#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;}
感谢您的帮助，现在开始伤害我了！ :(
丹
答案 0 :(得分：5)
$('#wedding-dresses').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev' ,
});
});
尝试删除“prev：'#prev'之后的最后一个逗号。 IE无法忍受对象中的尾随逗号。
答案 1 :(得分：-1)
我接近这个的方式是以物理方式查看布局。
例如，我想象了几张照片贴在相框下方的长海报板上。相框将作为限制可以看到哪些信息的顶级DIV。海报板将是一个更大的包含DIV，其嵌套每个内容DIV的图片。在我看来，这是设想这个设置的最简单方法。
现在，有了这样的说法，我建议你的'海报板'div宽度足够宽，以便并排包含你所有的'图片'。并确保你的'相框'DIV溢出：隐藏;
如果这不能解决任何问题，请告诉我，我可以尝试为您做一些代码，向您展示我试图解释的内容。但希望这至少可以让你对我正在假设的内容有所了解，你正试图完成。