Question

Chrome，FF和IE8都可以。但是在IE6中，在 div“中间栏”之下有一个奇怪的边距（在其中有3个 div，名为featured1,2和3。），高于 divs“left-column”和“right-column”）。我已经尝试了一切来解决这个问题。我尝试了“显示：内联技术”和CSS重置。请帮忙！我正在测试我的网站here

我的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;
}

Answer 1

如果你看一下div id="slideshow"，你会发现它有margin:10px auto，这基本上就是应用10px的保证金最高点和10px的保证金底部。 IE6倾向于加倍边距，因此应用margin:5px 0;它应该显示与Firefox，IE8，IE7和所有其他最新浏览器相同的内容。

- 也仅供参考，在这种情况下不需要'自动'样式，如果您希望将元素放在其父级的中心，则通常使用此样式。例如，如果您希望网站显示在屏幕中央，您可以使用'margin:0 auto;'

我希望这能解决你的问题！

IE6的边缘和填充“行为”的传奇烦恼（帮助！）

1 个答案: