CSS와 인터넷 익스플로러의 신비한 문제 7

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

문제

IE가 웹 디자이너에게 악몽이라고 생각합니다. ie7 div#이미지 (회색 div)와 단락의 div#컨텐츠 CSS 용품으로 고통 받고 있습니다 H2 꼬리표. 미리 감사드립니다!

편집 : Eric Meyer의 CSS 재설정조차 시도했지만 작동하지 않았습니다.

edit2 : 나는 단지 그것을 발견했다 H1 어느 것이 앞서 div#이미지 문제를 일으키고 있지만 여전히 이유를 알 수 없습니다.

인터넷 익스플로러 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 박스 정의는 다르고, 여백과 패딩은 너비의 일부로 계산되며, 새로운 브라우저에서는 너비에 추가됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top