要在使用float时处理折叠父级，我使用overflow：auto。在Firefox中它运行良好，但在IE中它有一个滚动条...为什么这个滚动条出现在IE浏览器？据我所知，盒子模型有边框和填充，所以它必须更小。滚动条出现的原因是什么？
// HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RamblingSoul</title>
<link rel="stylesheet" href="Rambling.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="hleft">
<h2>RamblingSoul</h2>
<p>A Free CSS Template from<br />RamblingSoul</p>
</div>
<div id="hmiddle">
<p id="hmiddle_lg1">Great Design</p>
<p class="bold" id="hmiddle_lg2">Guaranteed</p>
</div>
<div id="hright">
<p id="hright_txt1">Client Testimonial</p>
<div id="hright_txt">
Lorem ipsum dolor sit amet, consecteur adipiscing<br />
elit. Cras tristique, felis ut vehicula laoreet, nunc<br />
dolor bibendum tortor, a faicibus eros tortor sed<br />
nunc, Aliquam eget arcu.Nam sem justo, vulputate<br />
eget, cursus id, volutat ullamcorper, felis. In eget<br />
velit ut diam ultrices ultrices.<a href="">Read More</a><ul><li></li></ul>
</div>
</div>
</div>
<div id="content">
<div id="cmenu">
<ul id="menu1">
<li class="yellow"><a href="" class="upper">HOME</a></li>
<li class="red"><a href="" class="upper">ABOUT</a></li>
<li class="pink"><a href="" class="upper">PRODUCTS</a></li>
<li class="blue"><a href="" class="upper">services</a></li>
<li class="green"><a href="" class="upper">news</a></li>
<li class="pblue"><a href="" class="upper">contact</a></li>
<li class="bblue"><a href="" class="upper">nogo</a></li>
</ul>
<ul id="menu2">
<li class="pgreen1">Lorem</li>
<li class="pyellow">Dolor Sit Amet</li>
<li class="pgreen2">Consectetur Adipiscing</li>
<li class="pyellow2">Cras tristique</li>
</ul>
</div>
<div id="main">
<div id="contents">
<div id="services" >
<div id="Serv" class="banner-red bold">our services</div>
<div id="Serv1">
<img src="images/images/serv1.jpg" alt="Service one" />
<p>
Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
<a href=""><img src="images/images/greenbullet.jpg" alt="Read More">Read More</a></p>
</div>
<div id="Serv2">
<img src="images/images/serv2.jpg" alt="Service one" />
<p>
Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
<a href=""><img src="images/images/greenbullet.jpg" alt="Read More">Read More</a></p>
</div>
<div id="Serv3">
<img src="images/images/serv3.jpg" alt="Service one" />
<p>
Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
<a href=""><img src="images/images/orangebullet.jpg" alt="Read More">Read More</a></p>
</div>
</div>
<div id="Contents">
<div id="content1" class="banner-red bold">Some contents</div>
<div id="content2">
<p >Service title<br /><br /></p>
<p>
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
</p>
</div>
<div id="content3">
<p >Service title</p>
<p>
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
</p>
</div>
<div id="content4">
<p>Service title</p>
<p>
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
</p>
</div>
</div>
</div>
</div>
</div>
<div id="footers">
<p>ramblingsoul.com @ All Rights Reserved</p>
<p>Template provided to Webucator for use in its CSS courseware</p>
<p><span class="underline">css template</span> by ramblingsoul</p>
</div>
</div>
</body>
</html>
.// CSS
@charset "utf-8";
/* CSS Reset */
body{width:100%;}
*{padding:0px;margin:0px}
ul,li{list-style:none}
#wrapper{background-color:#CF0;width:955px;margin:0 auto;overflow:auto}
/* Css for header */
#header{width:954px;float:left;clear:both;border:#000 dashed thin}
答案 0 :(得分：1)
尝试溢出：隐藏;代替。
答案 1 :(得分：1)
显示滚动条，因为thin作为border-width的值相当于IE的2px和其他浏览器的1px，因此标题的宽度为2px + 954px + 2px = 958px太宽对于955px IE的容器，然后生成两个滚动条（可以说它应该只生成一个水平的但很好;）
因此我建议您将边框更改为：
border:#000 dashed 1px
这将使浏览器控制边框宽度，然后您需要将容器宽度更改为1px + 954px + 1px = 956px以允许此
你可以使用overflow hidden，但在这种情况下，你将裁剪标题的右边框，自动可以是一个很好的设置，同时测试找到这样的东西;）