IE6のマージンとパディングの「行動」の伝説のうるささ（ヘルプ！）

StackOverflow https://stackoverflow.com/questions/1872929

質問

すべてがクロム、FFとIE8でOKです。しかし、IE6でののdivがあります。を）そこに奇妙なマージンは、右の divの "真ん中の列" の下のを> divを "左列" と "右欄"）> ここを

MY 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>

MY 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;
}
役に立ちましたか？

解決

あなたはdiv id="slideshow"を見てみる場合は、

、あなたはそれが基本的に10pxの余白のトップと10pxの余白の下を適用するために言っているmargin:10px autoを持っていることがわかります。 IE6は、それは、Firefox、IE8、IE7で行い、他のすべての最新のブラウザにと、それは同じように表示されるはずですmargin:5px 0;を適用してようマージンを倍増する傾向があります。

- あなたは親の中央に座っ要素を作るために探している場合にもちょうど参考のために、「自動」スタイルが、この場合に必要とされなかった、これは一般的に使用されています。あなたが画面の中央に表示するウェブサイトを望んでいた場合には、この例のようになります'margin:0 auto;'を使用します。

私は、これはあなたの問題を解決を願っています！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top