Question

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>

上面代码的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中的文本块更加正确。有人能发现错误吗？

谢谢，Geo

注意：我正在使用YUI CSS重置库，因为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问题。由于我不知道为什么会出现这种情况，我会将第一个用投票作出解释的人标记为已接受的答案。感谢您的帮助。

Answer 1

确保在doctpye声明之前没有任何空格/字符。

此外，它可能是关于保证金崩溃的事情（但我现在不能告诉你，我刚刚醒来，我现在更像是一个僵尸：D）

但是，您没有告诉我们该页面是否有效。您可能还有一些嵌套元素。所以我认为最好的办法就是把它放到网上并给我们链接：）

Answer 2

修改

解决IE唯一问题的最佳方法（并且有很多IE只有问题，尤其是6 + 7）正在使用IE的“功能”，它允许您有条件地仅包含IE的样式信息。

在此处举例说明：http://dustinbrewer.com/css-trick-target-only-ie-with-an-if-statement/

我的回答的先前版本指出了IE的“快速修复黑客”，它只包含IE中的一个样式元素。正如评论中指出的那样，有很多理由没有这样做，唯一的积极方面是它很快：

以前的答案版本

我会使用IE下划线修复此问题，这是我发现的第一个链接：

http://dustinbrewer.com/weekly-css-trick-the-ie-underscore-hack/

基本上你在css属性之前放置一个下划线，只有IE6和IE7才会使用该属性。所以你可以做_right -34px这样的事情，它只会影响IE 8之前的版本。

或在这种情况下将其更改为

padding-left:315px; _padding-left:122px;

第一个将影响所有其他浏览器，第二行将仅为IE
级联

Answer 3

从表面上看，你的CSS似乎很好。查看所有CSS，尤其是适用于body的CSS，会很有用，但它似乎是一个父元素问题。尝试为div＃spotlightHolder设置固定宽度或百分比宽度。

Answer 4

尝试使用Eric Meyer的CSS重置工具，而不是浪费时间专注于IE的怪癖。

http://meyerweb.com/eric/tools/css/reset/

为什么不将550px的宽度分配给.spotlightholder，以便它继承？

Answer 5

我非常希望blueprint能够重置css。

它使得跨浏览器的布局非常简单并且使用相当广泛。

如何克服IE7填充问题？

5 个答案: