我知道这个问题很多，但我已经查看过几乎没有任何好结果的事情了。
基本上我的包装有一个余量：40px auto;它。除了IE7之外，它在我尝试的每个浏览器中都很好地集中。出于某种原因，它只将导航菜单居中，然后它就像包装器自动关闭一样，使其他所有东西都浮动到左侧。这很可怕。
HTML CODE
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" href="ext/styles/default.css" type="text/css" />
<link href="ext/styles/jflow.style.css" type="text/css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="ext/js/jflow.plus.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#mySlides", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
effect: "flow", //this is the slide effect (rewind or flow)
width: "783px", // this is the width for the content-slider
height: "331px", // this is the height for the content-slider
duration: 400, // time in milliseconds to transition one slide
pause: 5000, //time between transitions
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: false
});
});
</script>
</head>
<body>
<noscript>
<h1 style="float: left; color: red; margin-bottom: 5000px;">JavaScript behövs för att korrekt visa denna sida</h1>
</noscript>
<div id="wrapper">
<div id="nav">
<div class="menu">
<ul>
<li class="start"><!-- /!/ --></li>
<div class="minus-left">
<li class="norm"><a class="active" href="#">hem</a></li>
<li class="norm"><a href="portfolio.html">portfolio</a></li>
<li class="norm"><a href="om.html">om</a></li>
<li class="norm"><a href="kontakt.html">kontakta</a></li>
</div>
<li class="end"><!-- /!/ --></li>
</ul>
</div>
</div>
<div id="rotator">
<div id="shadow"><img src="ext/imgs/img_shadow.png" alt="Shadow" /></div>
<div id="controller">
<div class="prev">
<img src="ext/imgs/left_arrow.png" class="jFlowPrev" alt="Left Arrow" />
</div>
<div class="next">
<img src="ext/imgs/right_arrow.png" class="jFlowNext" alt="Right Arrow" />
</div>
</div>
<div id="mySlides">
<div id="slide1" class="slide"> <img src="ext/slides/slide_1.png" alt="Slide 1 jFlow Plus" />
<div class="slideContent">
<h3>Bespoke Booklet...</h3>
<p>... for Offsite Design Studio to showcase their services.</p>
</div>
</div>
<div id="slide2" class="slide"> <img src="ext/slides/slide_2.png" alt="Slide 2 jFlow Plus" />
<div class="slideContent">
<h3>Aggregate</h3>
<p>Professional high-quality Wordpress theme from ElegantThemes.</p>
</div>
</div>
<div id="slide3" class="slide"> <img src="ext/slides/slide_3.png" alt="Slide 3 jFlow Plus" />
<div class="slideContent">
<h3>Deep Focus</h3>
<p>Professional high-quality Wordpress theme from ElegantThemes.</p>
</div>
</div>
</div>
<div id="myController">
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
</div>
</div>
<div class="content_sep_top" style="margin-top: 70px; margin-bottom: 15px;"></div>
<div class="single_page line_height_15">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac ante nisi, sed laoreet dui. Sed imperdiet euismod scelerisque. Quisque id massa a nunc convallis congue. Sed venenatis cursus rhoncus. Nam a purus in elit vehicula faucibus. Integer ornare elementum magna sed mattis. Duis dui velit, semper ac dignissim aliquet, eleifend sit amet augue. Donec at arcu quis ipsum volutpat rhoncus. Cras orci orci, congue at tincidunt ut, imperdiet at lorem. Duis ultricies diam a elit vulputate auctor. Nam congue leo et neque imperdiet elementum. Vestibulum vulputate, ante at consectetur eleifend, diam enim vulputate odio, sit amet facilisis neque nibh sed nisl.
</p>
</div>
<div class="content_sep_top" style="margin-top: 15px;"></div>
</div>
</body>
</html>
CSS代码。
* {
margin: 0px;
padding: 0px;
}
body {
font-family: helvetica, arial, verdana, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 18px;
background-image: url(../imgs/bg.png);
background-repeat: repeat-y;
background-color: #D7D7D7;
background-position: center;
text-align: center;
color: #616161;
width: 100%;
}
#wrapper {
width: 801px;
margin: 40px auto;
text-align: left;
}
#nav {
float: left;
width: 801px;
position: relative;
height: 60px;
}
.menu {
position: absolute;
left: 50%;
margin-left: -395px;
background-image: url(../imgs/middle_nav.png);
background-repeat: repeat-x;
width: 791px;
}
.menu ul {
list-style-type: none;
}
.menu li {
float: left;
}
.menu li.start {
background-image: url(../imgs/left_nav.png);
float: left;
background-repeat: no-repeat;
height: 60px;
width: 9px;
margin-left: -9px;
}
.menu li.norm {
background-image: url(../imgs/nav_sep.png);
background-repeat: no-repeat;
background-position: right;
padding: 17px;
text-transform: capitalize;
}
.menu li.norm a {
color: #B2B2B2;
text-decoration: none;
font-size: 14px;
}
.menu li.norm a:hover {
color: #747474;
}
.menu li a.active {
color: #747474;
}
.menu li.end {
background-image: url(../imgs/right_nav.png);
float: right;
background-repeat: no-repeat;
height: 60px;
width: 10px;
margin-right: -10px;
}
#rotator {
margin-top: 40px;
float: left;
background-color: white;
width: 781px;
height: 329px;
padding: 10px 10px 10px 10px;
position: relative;
}
#shadow {
position: absolute;
float: left;
width: 801px;
height: 379px;
margin-left: -13px;
margin-top: 0px;
z-index: -1;
}
#controller {
float: left;
position: absolute;
left: 50%;
margin-left: -86px;
margin-top: -18px;
background-image: url(../imgs/controller.png);
width: 172px;
height: 54px;
z-index: 2;
}
#mySlides {
width: 781px;
height: 329px;
}
#slide1, #slide2, #slide3 {
width: 781px;
height: 329px;
border: 1px solid #c6c6c6;
}
.prev {
float: left;
margin-top: 16px;
margin-left: 26px;
}
.next{
float: right;
margin-top: 16px;
margin-right: 26px;
}
.next img,
.prev img {
border: 0px;
outline: 0px;
cursor: pointer;
}
ul, li {
list-style-type: none;
}
.content_sep {
background-image: url(../imgs/content_sep.png);
background-repeat: repeat-x;
width: 801px;
height: 2px;
float: left;
}
.content_sep_top {
background-image: url(../imgs/content_sep.png);
background-repeat: repeat-x;
width: 801px;
height: 2px;
float: left;
}
.container {
margin-top: 40px;
float: left;
}
.left {
width: 532px;
float: left;
}
.left p {
width: 500px;
}
.left ul {
padding-left: 10px;
}
.img {
width: 502px;
height: 402px;
padding: 10px;
background-color: white;
position: relative;
}
.left .img img {
border: 1px solid #c6c6c6;
}
.right {
width: 265px;
float: right;
text-align: right;
}
.right li {
float: left;
margin-left: 10px;
margin-bottom: 10px;
width: 102px;
height: 102px;
padding: 10px;
background-color: white;
}
.right li img {
border: 1px solid #c6c6c6;
}
.info {
width: 500px;
}
ul.side {
padding: 0px;
margin: 0px;
}
ul.head {
margin-top: 30px;
}
.side {
float: right;
width: 350px;
}
.img_overlay {
background: url("../imgs/contentBg.png") repeat scroll 0 0 transparent;
position: absolute;
padding: 10px;
width: 462px;
left: 20px;
bottom: 20px;
}
.img_overlay p {
font-family: Georgia, serif;
color: #FFF;
margin: 0;
}
.single_page {
width: 771px;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.left h1,
.single_page h1 {
text-align: center;
font-family: Georgia, serif;
color: #bababa;
font-size: 28px;
font-style: italic;
}
.line_height_15 {
line-height: 15px;
}
.img h3 {
font-family: Georgia, serif;
color: #FFF;
font-size: 28px;
font-style: italic;
margin: 5px 0 5px 0;
}
.left_top {
margin-top: 40px;
float: left;
margin-left: 10px;
}
.padding_left_10 {
padding-left: 10px;
}
.fields {
outline: 0px;
padding: 3px;
width: 50%;
}
.width_70 {
width: 70%;
height: 150px;
}
.submit{
float: right;
margin-right: 140px;
padding: 3px;
}
.minus-left {
margin-left: -4px;
float: left;
}
我会很乐意得到任何帮助。正如我上面所说，当我在IE7中查看源代码时，看起来封装器在导航后立即关闭，但我看不出如何。
我现在非常绝望，也请不要评论代码是多么混乱/重复，除非它实际上有助于解决问题。这段代码现在只是一个草稿，我并不是说听起来很粗鲁。
提前致谢！
答案 0 :(得分：0)
你改变#rotator的一个小东西移除浮动：左;技术如下 我使用它的星形符号仅适用于ie-7。试试这个...... #rotator { *浮动：无; } .single_page { *浮动：无; 文本alignL：左; } 我使用它的星形符号仅适用于ie-7。试试这个......