我正在一个单页网站上工作，我修改了html以包含六个部分。它适用于所有浏览器，除了IE浏览器。它把我踢到倒数第二个和最后两个部分之间（在修改后的版本中有一个额外的部分）我尝试删除 js 查询，但这没有任何作用，这证实了我的怀疑它与 css 有关。我对网页设计很陌生，我不确定要调整什么，请查看下面的代码（这是没有附加部分的版本）：
目录：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="metro, free website template, beautiful grid, image grid menu, colorful theme" />
<meta name="description" content="Metro is a free website template by templatemo.com and it features jQuery horizontal scrolling among pages." />
<link href="templatemo_style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
<body>
<div id="templatemo_header">
<div id="site_title"><h1><a href="http://www.templatemo.com" title="Free Website Template">Metro</a></h1></div>
</div>
<div id="templatemo_main">
<div id="content">
<div id="home" class="section">
<div id="home_about" class="box">
<h2>Welcome</h2>
<p>Metro is a <a href="http://www.templatemo.com/page/1">free website template</a> for everyone from <a href="http://www.templatemo.com">templatemo.com</a> and it can be used for any purpose. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis leo, feugiat sed porttitor sagittis, facilisis sit amet lectus. Aenean elementum tellus auctor dolor auctor luctus. Vivamus eu orci purus, ut vulputate nisl.</p>
<p>Praesent imperdiet mauris et lorem malesuada consequat. Proin nisl metus, faucibus vitae malesuada non, interdum sed felis. Sed ut turpis feugiat lorem faucibus dignissim. Donec magna tellus, feugiat vel fermentum eget, fringilla at metus.</p>
</div>
<div id="home_gallery" class="box no_mr">
<a href="images/gallery/01-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/01.jpg" alt="image 1" /></a>
<a href="images/gallery/02-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/02.jpg" alt="image 2" /></a>
<a href="images/gallery/03-l.jpg" rel="lightbox[gallery]" class="no_mr"><img src="images/gallery/03.jpg" alt="image 3" /></a>
<a href="images/gallery/04-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/04.jpg" alt="image 4" /></a>
<a href="images/gallery/05-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/05.jpg" alt="image 5" /></a>
<a href="images/gallery/06-l.jpg" rel="lightbox[gallery]" class="no_mr"><img src="images/gallery/06.jpg" alt="image 6" /></a>
</div>
<div class="box home_box1 color1">
<a href="#services"><img src="images/templatemo_services.jpg" alt="Services" /></a>
</div>
<div class="box home_box1 color2">
<a href="#testimonial"><img src="images/testimonial.jpg" alt="Testimonial" /></a>
</div>
<div class="box home_box2 color3">
<div id="social_links">
<a href="https://www.facebook.com/templatemo"><img src="images/facebook.png" alt="Facebook" /></a>
<a href="#"><img src="images/flickr.png" alt="Flickr" /></a>
<a href="https://www.facebook.com/templatemo"><img src="images/twitter.png" alt="Twitter" /></a>
<a href="#"><img src="images/youtube.png" alt="Youtube" /></a>
<a href="https://www.facebook.com/templatemo"><img src="images/vimeo.png" alt="Vimeo" /></a>
<div class="clear h20"></div>
<h3>Social</h3>
</div>
</div>
<div class="box home_box1 color4 no_mr">
<a href="#contact"><img src="images/contact.jpg" alt="Contact" /></a>
</div>
</div> <!-- END of home -->
<div class="section section_with_padding" id="services">
<h2>Services</h2>
<div class="img_border img_fl">
<img src="images/templatemo_image_03.jpg" alt="image" />
</div>
<div class="half right">
<ul class="list_bullet">
<li>Maecenas ac odio ipsum donec cursus</li>
<li>Fusce risus tortor, interdum</li>
<li>Proin facilisis ullamcorper</li>
<li>Sed vel justo quis ligula</li>
<li>Ut tristique sagittis arcu</li>
<li>Maecenas ac odio ipsum donec cursus</li>
<li>Fusce risus tortor, interdum</li>
</ul>
</div>
<div class="clear h40"></div>
<div class="img_border img_fr">
<img src="images/templatemo_image_04.jpg" alt="image" />
</div>
<div class="half left">
<p><em>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mauris ipsum, pulvinar sit amet varius at, placerat ut felis.</em></p>
<p>Donec vitae tortor non ipsum tristique condimentum ac ac nulla. Etiam sagittis iaculis dolor ut euismod. Nam faucibus, risus at consequat malesuada, urna turpis sagittis libero, sodales hendrerit dui arcu et nisi. Praesent pulvinar, dolor id lacinia pulvinar, mi ligula tempor libero, et semper sem dolor et elit. </p>
</div>
<a href="#home" class="slider_nav_btn home_btn">home</a>
<a href="#home" class="slider_nav_btn previous_btn">Previous</a>
<a href="#testimonial" class="slider_nav_btn next_btn">Next</a>
</div>
<div class="section section_with_padding" id="testimonial">
<h2>Testimonial</h2>
<p><em>Aliquam venenatis, quam a semper blandit, lectus mi convallis orci, ut dictum ante leo non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, urna in gravida rhoncus, mi elit luctus nibh, a luctus erat elit vel quam. </em></p>
<div class="clear h40"></div>
<div class="half left">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 1" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Walker - <span>TemplateMo.com</span></cite>
</div>
<div class="half right">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 2" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Jason - <span>TemplateMo.com</span></cite>
</div>
<div class="clear h40"></div>
<div class="half left">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 3" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Danny - <span>FlashMo.com</span></cite>
</div>
<div class="half right">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 4" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Katey - <span>KoFlash.com</span></cite>
</div>
<a href="#home" class="slider_nav_btn home_btn">home</a>
<a href="#services" class="slider_nav_btn previous_btn">Previous</a>
<a href="#contact" class="slider_nav_btn next_btn">Next</a>
</div>
<div class="section section_with_padding" id="contact">
<h2>Contact</h2>
<div class="half left">
<h4>Quick Contact Form</h4>
<p>Nullam a tortor est, congue fermentum nisi. Maecenas nulla nulla, eu volutpat euismod, scelerisque ut dui.</p>
<div id="contact_form">
<form method="post" name="contact" action="#contact">
<div class="left">
<label for="author">Name:</label> <input name="author" type="text" class="input_field" id="author" maxlength="40" />
</div>
<div class="right">
<label for="email">Email:</label> <input name="email" type="text" class="input_field" id="email" maxlength="40" />
</div>
<div class="clear"></div>
<label for="text">Message:</label> <textarea id="text" name="text" rows="0" cols="0"></textarea>
<input type="submit" class="submit_btn float_l" name="submit" id="submit" value="Send" />
</form>
</div>
</div>
<div class="half right">
<h4>Mailing Address</h4>
460-820 Duis lacinia dictum, <br />
Vestibulum auctor, 12650<br />
Nam rhoncus, diam a mollis<br />
<strong>Email: info[ at ]companyname[ dot ]com</strong><br />
<div class="clear h20"></div>
<div class="img_nom img_border"><span></span>
<iframe width="320" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Central+Park,+New+York,+NY,+USA&aq=0&sll=14.093957,1.318359&sspn=69.699334,135.263672&vpsrc=6&ie=UTF8&hq=Central+Park,+New+York,+NY,+USA&ll=40.778265,-73.96988&spn=0.033797,0.06403&t=m&output=embed"></iframe>
</div>
<a href="#home" class="slider_nav_btn home_btn">home</a>
<a href="#testimonial" class="slider_nav_btn previous_btn">Previous</a>
</div>
</div>
</div>
</div>
<div id="templatemo_footer">
Copyright © 2072 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
</div>
</body>
</html>
.CSS：
body{
margin: 0;
padding: 0;
color: #ddd;
font-size: 12px;
line-height: 1.6em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #000;
}
a, a:link, a:visited { color: #9CF; font-weight: normal; text-decoration: none }
a:hover { color: #FF6; text-decoration: none; }
ul, li {
padding:0;
margin:0;
list-style:none;
}
h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: normal; }
h1 { font-size: 58px; margin: 0 0 30px; padding: 5px 0 }
h2 { font-size: 34px; margin: 0 0 30px; padding: 5px 0 }
h3 { font-size: 20px; margin: 0 0 20px; padding: 0; }
h4 { font-size: 16px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 14px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 12px; margin: 0 0 5px; padding: 0; font-weight: 700 }
p { padding: 0; margin: 0 0 15px 0 }
.clear{
clear:left;
}
cite { font-weight: bold; color:#fff; }
cite a, cite a:link, cite a:visited { font-size: 12px; text-decoration: none; font-style: normal }
cite span { font-weight: 400; color: #ccc; }
.list_bullet { margin: 0 0 10px 15px; padding: 0; list-style: none }
.list_bullet li { color:#fff; margin: 0 0 7px 0; padding: 0 0 0 20px; background: url(images/templatemo_list.png) no-repeat scroll 0 6px }
.list_bullet li a { color: #fff; font-weight: normal; text-decoration: none }
.list_bullet li a:hover { color: #fff }
.no_bullet { margin: 0; padding: 0; list-style: none }
.no_bullet li { margin: 0 0 20px 0; padding: 0 }
a.header { display: block; font-weight: 700 }
.half { width: 370px }
.h20 { height: 20px }
.h40 { height: 40px }
img { margin: 0; padding: 0; border: none }
.img_border { background: #fff; padding: 4px; border: 1px solid #ccc }
.img_nom { display: inline-block; margin-bottom: 15px }
.img_fl { float: left; margin: 3px 15px 5px 0 }
.img_fr { float: right; margin: 3px 0 5px 15px }
.left { float: left }
.right { float: right }
#templatemo_header {
width: 800px;
margin: 0 auto;
padding: 30px 0;
}
#templatemo_main {
width: 800px;
height: 487px;
overflow: hidden;
margin: 0 auto;
}
#templatemo_footer {
width: 800px;
margin: 0 auto;
padding: 20px 0;
text-align: right
}
#site_title { display: block }
#site_title a { color: #fff; font-weight: 700; letter-spacing: 10px; line-height: 30px }
#content{
overflow:hidden;
width: 7000px;
position:relative;
height: 487px;
}
.section {
position:relative;
float:left;
width: 800px;
height: 487px;
margin-right: 20px;
}
.section a.slider_nav_btn { position: absolute; top: 0; width: 50px; height: 46px; display: block; background-image: url(images/slider_nav_btn.jpg); text-indent: -10000px }
.section a.home_btn { right: 50px; background-position: 102px 0 }
.section a.previous_btn { right: 100px; background-position: 0 0 }
.section a.next_btn { right: 0px; background-position: 50px 0 }
.box { float: left; margin: 0 10px 10px 0 }
#home_about { width: 314px; height: 314px }
#home_gallery { width: 476px; height: 314px }
.home_box1 { width: 152px; height: 152px }
.home_box2 { width: 314px; height: 152px }
.color1 { background: #d0b500 }
.color2 { background: #c75000 }
.color3 { background: #00afce }
.color4 { background: #a4c700 }
#home_gallery a { display: block; float: left; width: 152px; height: 152px; margin: 0 10px 10px 0 }
#home_gallery a.no_mr { margin-right: 0 }
#social_links {
text-align: center;
padding: 40px 0 0 0
}
#social_links a {
display: block;
float: left;
width: 48px;
height: 48px;
margin-left: 12px
}
#gallery {
}
#gallery li {
width: auto;
height: auto;
float: left;
width: 152px;
height: 245px;
background: none;
margin: 0 10px 10px 0;
}
#gallery li a {
display: block;
}
#gallery li a img { }
#gallery li.no_margin_right { margin-right: 0 }
#contact_form { padding: 0; width: 330px }
#contact_form form { margin: 0px; padding: 0px; }
#contact_form form .input_field { width: 150px; padding: 5px; color: #CCC; border: 1px solid #666; background: #222; margin-bottom: 10px; }
#contact_form form label { display: block;font-size: 11px }
#contact_form form textarea {
clear: both;
width: 320px; height: 120px;
padding: 5px;
color: #CCC;
border: 1px solid #666;
font-family: Arial, Helvetica, sans-serif;
background: #222;
margin-bottom: 10px;
}
#contact_form form .submit_btn { font-size: 12px; background: #333; color: #CCC; cursor:pointer; border: 1px solid #666; padding: 5px 10px; }
.no_mr { margin-right: 0 }
我很确定问题出在这里：
#templatemo_main {
width: 800px;
height: 487px;
overflow: hidden;
margin: 0 auto;
}
或在这里：
#content{
overflow:hidden;
width: 7000px;
position:relative;
height: 487px;
}
我不确定要调整什么，任何帮助将不胜感激！
PS：我是堆叠流量的新手，我不知道这是否是您应该问的问题类型。如果不是，请告诉我！:)
由于IE3中对CSS10的支持已经足够好了，我想您正在针对该浏览器的旧版本测试您的网站。
有很多 css 元素在旧的 IE 版本上不起作用。我建议你使用一些像Modernizr这样的库来获得更多的兼容性。
您的代码对于您提供的少量信息来说太广泛了。您观察到的确切错误是什么？但是快速浏览一下，我看到一些"显示：内联块"，这当然可能不起作用。您应该尝试将"float： left;"与"display： block"以及这些元素的给定宽度组合。
如果您多指定一点您发现的确切错误，以便我们可以将自己指向代码的相关部分，也许您可以获得更多帮助。