Fatal编程技术网
  • css/
  • Css IE6和x27的传奇烦恼；“s边距和填充”；“行为”；（救命啊！）

Css IE6和x27的传奇烦恼；“s边距和填充”；“行为”；（救命啊！）

css

Css IE6和x27的传奇烦恼；“s边距和填充”；“行为”；（救命啊！）,css,internet-explorer-6,padding,margin,Css,Internet Explorer 6,Padding,Margin,在Chrome、FF和IE8中一切正常。但在IE6中，div“中间列”的正下方有一个奇怪的边距（内部有3个div，称为feature1、2和3.），它位于div“左列”和右列”的上方。我已经想尽一切办法解决那个问题了。我尝试了“显示：内联技术”和CSS重置。请帮忙！我正在测试我的网站 我的HTML： <body id="home"> <!-- header --> <div id="header"> <div class="container"&

在Chrome、FF和IE8中一切正常。但在IE6中，div“中间列”的正下方有一个奇怪的边距（内部有3个div，称为feature1、2和3.），它位于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结构：

#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;
}
如果你看一下
div id=“slideshow”
，你会发现它有
margin:10px auto
，基本上就是说应用10px的页边距顶部和10px的页边距底部。IE6倾向于通过应用
margin:5px0使边距加倍它的显示应该与Firefox、IE8、IE7和所有其他最新浏览器中的显示相同

--同样仅供参考，在本例中不需要“自动”样式，如果您希望使元素位于其父元素的中心，通常会使用该样式。例如，如果您希望在屏幕中央显示一个网站，您可以使用
'margin:0auto；'


我希望这能解决你的问题
 我刚刚意识到IE为每一个#特色div inside#中间列添加了一些边距（或填充）。我怎样才能解决这个问题？

#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;
}