如何克服IE7填充问题？
[英]How to overcome IE7 padding issues?
问题描述
IE7让我发疯。 我知道这是一件小事，但我不知道Google还有什么，而且我知道我缺少一些很小的东西。
<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>
上面代码的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;
}
以上所有结果是，在IE7中，与FF，Chrome，Safari甚至是IE8相比，div id = spotlight中的文本块更右。 谁能发现错误？
谢谢，地理
注意：我正在使用YUI CSS Reset库，因为一个SO问题建议针对类似的错误进行此操作，但这不能解决该错误。
注意2：我使用的是doctype：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
重要的提示：
通过在CSS上的div＃spotlightMessage中添加margin-right：400px，IE7问题已得到解决。 由于我不知道为什么会发生这种行为，因此我将第一个以投票方式做出解释的人标记为被接受的答案。 感谢你的帮助。
5 个解决方案
解决方案1
1 2010-02-22 05:41:57
确保在doctpye声明之前没有任何空格/字符。
同样，这可能与保证金崩溃有关（但是我现在不能告诉你，我刚刚醒来，现在我更像一个僵尸：D）
但是，您没有告诉我们该页面是否有效。 您可能在那里还有一些嵌套元素。 因此，我认为最好的方法是将其放到网上并给我们链接:)
解决方案2
0 2010-02-22 01:24:30
编辑
解决IE唯一问题（并且有很多IE唯一问题，尤其是6 + 7）的最好方法是使用IE的“功能”，它使您有条件地仅包括IE的样式信息。
在此处通过示例进行描述： http : //dustinbrewer.com/css-trick-target-only-ie-with-an-if-statement/
我的答案的先前版本指出了IE的“快速修复方法”，该方法只在IE中包含一个样式元素。 正如评论中指出的那样，有很多理由不这样做，其唯一积极的方面是它的快速性：
后续版本的答案如下
我将使用IE下划线hack来解决此问题，这是我发现的第一个链接：
http://dustinbrewer.com/weekly-css-trick-the-ie-underscore-hack/
基本上，您在css属性前加上下划线，只有IE6和IE7会使用该属性。 因此，您可以执行_right -34px ，并且只会影响IE 8之前的版本。
或者在这种情况下将其更改为
padding-left:315px;
_padding-left:122px;
第一个会影响所有其他浏览器，第二个行只会针对IE进行级联
解决方案3
0 2010-02-22 04:24:30
从表面上看，您的CSS看起来不错。 查看所有CSS，特别是适用于body的CSS，将很有用，但这似乎是父元素的问题。 尝试为div＃spotlightHolder设置固定宽度或百分比宽度。
解决方案4
0 2010-02-22 22:28:29
尝试使用Eric Meyer的CSS重置工具，而不是浪费时间专注于IE的怪癖。
http://meyerweb.com/eric/tools/css/reset/
并且为什么不将550px宽度分配给.spotlightholder以便继承呢？
解决方案5
0 2010-02-22 22:59:39
我真的很喜欢做CSS重置的蓝图 。
它使跨浏览器获得一致的布局变得非常容易，并且被广泛使用。
IE7 问题的边距/填充 - 如何解决？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.