CSS 和 Internet Explorer 7 的神秘问题
Posted
技术标签:
【中文标题】CSS 和 Internet Explorer 7 的神秘问题【英文标题】：Mysterious problem with CSS and Internet Explorer 7 【发布时间】：2010-12-21 04:37:10 【问题描述】：我认为 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 和谷歌浏览器： Firefox 3 and 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" 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;
【问题讨论】：
这不是神话，而是事实。 :P 【参考方案1】：上面写着：
<h1>Featured Projects<h2>
您确定这是您的代码吗？它以 h1 开头，以 h2 结尾 PS。 IE7 中的 CSS 框定义不同，边距和填充算作宽度的一部分，在较新的浏览器中它们被添加到宽度中
【讨论】：
天哪。这是一个愚蠢的错误。我希望没有多少人看到这个帖子。 PS：为什么我不能删除这个帖子！技术支持！ 啊！我的眼睛！！护目镜！他们什么都不做！以上是关于CSS 和 Internet Explorer 7 的神秘问题的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer 7中的CSS背景大小封面[重复]
:after 和 :before 用于 Internet Explorer 7 的 CSS 伪元素破解
Wordpress CSS 在 Internet Explorer 中不起作用
内联块在 Internet Explorer 7、6 中不起作用
在同一台计算机上运行 Internet Explorer 6、Internet Explorer 7 和 Internet Explorer 8
html Internet Explorer支持使用条件注释。以下代码段在旧版Internet Explorer中添加了HTML5和CSS3支持