Html 如何克服 IE7 填充问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2308256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overcome IE7 padding issues?
提问by Geo
IE7 is driving me crazy. I know is a small thing, but I don't know what else to google, and I know I am missing something very small.
IE7 快把我逼疯了。我知道这是一件小事，但我不知道还有什么可以谷歌，我知道我错过了一些非常小的东西。
<div id="spotlightHolder">
<div id="spotlight">
<div id="spotlightMessage">
<h1 id="spotlightTitle">Lorem ipsum dolor sit amet.</h1>
<p id="spotlightDescription">Lorem ipsum dolor, consectetur adipiscing elit. Curabitur massa mi, pharetra vitae luctus at, rutrum posuere quam. Integer pharetra tincidunt vehicula. Vestibulum nec purus id purus sodales hendrerit sit.</p>
<a id="spotlightBotton" href="#" title="Click here to get our Special"></a>
</div>
</div>
</div>
The css for the code above is:
上面代码的css是：
div#spotlightHolder
{
background:url(../images/below-menu-gradient.jpg) repeat-x;
height:100%;
padding:34px 0 0 0;
}
div#spotlight
{
height:325px;
background-color:#00aff0; /* Sky blue */
background: rgb(0,175,240) url('../images/spotlight.jpg') no-repeat center center;
}
div#spotlightMessage
{
width:550px;
height:210px;
/*margin:0 0 0 315px;*/
/*padding:70px 0 0 315px;*/
/*margin:0;*/
padding-top:70px;
padding-left:315px;
text-align:left;
}
div#spotlightMessage p
{
font-size:22px;
font-weight:bolder;
margin:0 0 10px 0;
}
div#spotlightMessage h1#spotlightTitle
{
color:White;
font-size:35px;
margin:0 0 17px 0;
}
The outcome of all the above is that in IE7 the text block inside the div id=spotlight is farther right in comparison with FF, Chrome, Safari or even IE8. Could anyone spot the error?
以上所有的结果是，在 IE7 中，div id=spotlight 中的文本块与 FF、Chrome、Safari 甚至 IE8 相比更靠前。有人能发现错误吗？
Thanks, Geo
谢谢，乔
NOTES: I am using YUI CSS Reset library, since an SO question suggested this for a similar error, but this did not fix the error.
注意：我正在使用 YUI CSS 重置库，因为一个 SO 问题建议了类似的错误，但这并没有修复错误。
NOTE 2: I am using doctype:
注 2：我正在使用文档类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IMPORTANT NOTE:
重要的提示：
By adding margin-right:400px to the div#spotlightMessage on the CSS the IE7 issue was fixed. Since I don't know why this behavior is happening, I will mark the first person that gives an explanation with votes as the accepted answer. Thanks for all your help.
通过将 margin-right:400px 添加到 CSS 上的 div#spotlightMessage，IE7 问题得到了修复。由于我不知道为什么会发生这种行为，我会将第一个给出解释的人用投票标记为已接受的答案。感谢你的帮助。
回答by Ionu? Staicu
Make sure you don't have any spaces/chars before doctpye declaration.
确保在 doctpye 声明之前没有任何空格/字符。
Also, it may be something about margin collapse (but I can't tell you right now, I just woke up and I'm a more like a zombie right now :D )
此外，这可能与保证金崩溃有关（但我现在不能告诉你，我刚醒来，我现在更像一个僵尸：D）
However, you didn't tell us if the page is valid. You may also have some nested elements out there. So I think the best thing is to put it online and give us the link :)
但是，您没有告诉我们该页面是否有效。您可能还有一些嵌套元素。所以我认为最好的办法是把它放在网上并给我们链接:)
回答by bcosca
Try Eric Meyer's CSS reset tool instead of wasting your time focusing on IE's quirks.
试试 Eric Meyer 的 CSS 重置工具，而不是把时间浪费在 IE 的怪癖上。
http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/tools/css/reset/
And why not assign the 550px width to .spotlightholder so it's inherited?
为什么不将 550px 宽度分配给 .spotlightholder 这样它就被继承了？
回答by Dan Lord
回答by Hogan
EDIT
编辑
The best way to fix an IE only problem (and there are many IE only problems, esp. in 6+7) is using the "feature" of IE which lets you conditionally include style information only for IE.
解决仅 IE 的问题（并且有许多仅 IE 的问题，尤其是在 6+7 中）的最佳方法是使用 IE 的“功能”，它允许您有条件地包含仅适用于 IE 的样式信息。
Described with an example here: http://dustinbrewer.com/css-trick-target-only-ie-with-an-if-statement/
这里用一个例子描述：http: //dustinbrewer.com/css-trick-target-only-ie-with-an-if-statement/
A prior version of my answer pointed out a "quick fix hack" for IE that would just include one style element in IE. As has been pointed out in the comments there are a lot of reasons not to do it this way, its only positive aspect being that it is quick:
我的回答的先前版本指出了 IE 的“快速修复黑客”，它只会在 IE 中包含一个样式元素。正如评论中指出的那样，有很多理由不这样做，唯一积极的方面是它很快：
Prior version of answer follows
先前版本的答案如下
I would use the IE underscore hack to fix this, here is the first link I found about it:
我会使用 IE 下划线 hack 来解决这个问题，这是我找到的第一个链接：
http://dustinbrewer.com/weekly-css-trick-the-ie-underscore-hack/
http://dustinbrewer.com/weekly-css-trick-the-ie-underscore-hack/
Basically you put an underscore before a css attribute and only IE6 and IE7 will use that attribute. So you could do something like _right -34pxand it would only effect IE pre version 8.
基本上，您在 css 属性之前放置一个下划线，只有 IE6 和 IE7 会使用该属性。所以你可以做类似的事情_right -34px，它只会影响 IE 8 之前的版本。
or in this case change it to have
或者在这种情况下将其更改为
padding-left:315px;
_padding-left:122px;
the first will effect all other browsers and 2nd row will cascade only for IE
第一个将影响所有其他浏览器，第二行仅对 IE 级联
回答by Tom
On the surface, your CSS seems fine. Would be useful to see all of your CSS, especially that which applies to body, but it seems to be a parent element problem. Try setting a fixed or percentage width for your div#spotlightHolder.
从表面上看，您的 CSS 看起来不错。查看所有 CSS 会很有用，尤其是适用于 body 的 CSS，但这似乎是父元素问题。尝试为 div#spotlightHolder 设置固定或百分比宽度。
