CSS和Internet Explorer 7的神秘问题

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

题

我认为IE对网页设计师来说是一场噩梦的神话真实。 IE7在我的 div＃image （灰色div）的左侧和右侧添加了一些神秘的填充或边距， div #content 中的段落正在遭受 h2 标签的CSS专有。提前谢谢！

编辑：我甚至尝试了Eric Meyer的CSS重置，但它没有用。

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/1ZctvuTRQLAzx9QKh6bA4VtuBWVh9.jpg

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