传奇的烦恼IE6的边际和填补“行为”(帮助！)
传奇的烦恼IE6的边际和填补“行为”(帮助！)
提问于 2009-12-09 10:16:00
在Chrome，FF和IE8中，一切都很好。但是在IE6中，在div“中间列”(在其中有3个名为featured1、2和3.的div)下面有一个奇怪的边距，它位于div“左列”和上。我已经用尽一切办法解决这个问题了。我尝试了“显示:内联技术”和CSS重置。请帮帮忙！我在测试我的网站这里
我的HTML：
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><a href="index.php"><span>home</span></a></li>
<li class="portfolio"><a href="portfolio.php"><span>portfolio</span></a></li>
<li class="about"><a href="about.php"><span>about</span></a></li>
<li class="contact"><a href="contact.php"><span>contact</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Featured Projects</h2>
<div id="featured1">
<a href="contact.php" target="_blank"><img alt="" src="images/project1.png"/></a>
<p>Featured work number 1</p>
</div>
<div id="featured2">
<a href="contact.php" target="_blank"><img alt="" src="images/project2.png"/></a>
<p>Featured work number 2</p>
</div>
<div id="featured3">
<a href="contact.php" target="_blank"><img alt="" src="images/project3.png"/></a>
<p>Featured work number 3</p>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p></p>
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>我的CSS重置：
/* reset */
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
ul {
list-style: none;
}
/* tags */
body {
background-color: #FFFFFF;
color: #757575;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #669BD9;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}我的CSS结构：
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 1px dashed #C0C0C0;
border-bottom: 1px dashed #C0C0C0;
padding: 2px 0 2px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column div {
float: left;
height: 224px;
width: 320px;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
#footer {
clear: both;
background-color: #F0F0F0;
height: 200px;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2009-12-09 12:52:26
如果你看一下div id="slideshow"，你会发现它有一个margin:10px auto，它基本上是指应用一个10 at的边距和10 at的边距。IE6倾向于将利润率提高一倍，因此通过应用margin:5px 0;，它应该显示与火狐、IE8、IE7和所有其他最新浏览器相同的效果。
--也只是为了参考，在这种情况下不需要使用“auto”样式，如果您想让一个元素位于其父元素的中心，则通常会用到它。这方面的一个例子是，如果您希望在屏幕中央显示网站，则使用'margin:0 auto;'。
我希望这能解决你的问题！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1872929
复制相关文章
相似问题
腾讯云开发者
