CSSとInternet Explorer 7の謎の問題

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

質問

IEはWebデザイナーにとって悪夢であるという神話は本当だと思います。 IE7は、 div＃image （灰色のdiv）の左右に不思議なパディングまたはマージンを追加しており、 div＃content の段落が苦しんでいます。 h2 タグのCSSプロパティ。事前に感謝します！

編集：Eric MeyerのCSS Resetを試しましたが、うまくいきませんでした。

edit2： div＃image の前にある h1 が問題を引き起こしているが、それでも理由がわからないことがわかりました。

Internet Explorer 7 Internet Explorer 7 http://www.pixentral.com/pics/13l8JIteyHdBhVVqfFods4fquEJUV1.jpg

Firefox 3およびGoogle Chrome： Firefox 3およびGoogle Chrome http://www.pixentral.com/pics/1ZctvuTRQLAzx9QKh6bA4VtuBWVVVVVVVVVVVVVVVVVVVVH a>

MY HTML： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>globo design</title> 
    <link href="styles/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="wrapper">
 <div id="header">
  <img id="globo" alt="globo design" src="images/globo.png">
  <ul id="navigation"> 
      <li class="current"><a href="index.html">Home</a></li> 
      <li><a href="index2.html">About Us</a></li> 
      <li><a href="index3.html">Contact Us</a></li> 
  </ul>  
 </div>
 <div id="featured">
  <h1>Featured Projects<h2>

  <div id="images">

  </div>
 </div>
 <div id="content"> 
  <h2>Page 1</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>
</body> 
</html>

マイCSS： 

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
/*typography*/
h1 {
    color: #808080;
    font-family: Arial;
    font-size: 2em;
    font-weight: normal;
    margin: 20px;
}
/*structure*/
body {
    background-color: #D7D7D7;
    color: #5D5D5D;
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 12px;
}
#wrapper {
    background-color: #FFFFFF;
    width: 960px;
    margin: 0 auto; 
}
#header {
    background-color: #555;
    padding: 10px 10px 0 10px;
}
img#globo {
    margin-bottom: 20px;    
}
ul#navigation {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#navigation li {
    background: url(../images/tab.png);
    float: left;
    margin: 0 2px 0 0;
    padding-left: 10px;
}
ul#navigation a {
    background: url(../images/tab.png) 100% 0;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 20px;
    text-decoration: none;
}
ul#navigation li.current {
    background-color: #48f;
    background-position: 0 -32px;
}
ul#navigation li.current a {
    background-position: 100% -32px;
}
#featured {

}
#images {
    margin-top: 10px;
    background-color: #E7E7E7;
    height: 200px;
}
#content {
    clear: left;
    padding: 10px;
}
    /*typography*/
    h1 {
     color: #808080;
     font-family: Arial;
     font-size: 2em;
     font-weight: normal;
     margin: 20px;
    }
    /*structure*/
    body {
     background-color: #D7D7D7;
     color: #5D5D5D;
     font-family: Arial, "MS Trebuchet", sans-serif;
     font-size: 12px;
    }
    #wrapper {
     background-color: #FFFFFF;
     width: 960px;
     margin: 0 auto; 
    }
    #header {
     background-color: #555;
     padding: 10px 10px 0 10px;
    }
    img#globo {
     margin-bottom: 20px; 
    }
    ul#navigation {
        height: 2em;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul#navigation li {
        background: url(../images/tab.png);
        float: left;
        margin: 0 2px 0 0;
        padding-left: 10px;
    }
    ul#navigation a {
        background: url(../images/tab.png) 100% 0;
        display: block;
        float: left;
        height: 2em;
        line-height: 2em;
        padding-right: 20px;
        text-decoration: none;
    }
    ul#navigation li.current {
        background-color: #48f;
        background-position: 0 -32px;
    }
    ul#navigation li.current a {
        background-position: 100% -32px;
    }
    #featured {

    }
    #images {
     margin-top: 10px;
     background-color: #E7E7E7;
     height: 200px;
    }
    #content {
        clear: left;
        padding: 10px;
    }
役に立ちましたか？

解決

言う：

<h1>Featured Projects<h2>

これがあなたのコードであると確信していますか？ h1で始まり、h2で終わる PS。 IE7のcssボックスの定義は異なり、マージンとパディングは幅の一部としてカウントされます。新しいブラウザーでは幅に追加されます

所属していません StackOverflow
scroll top