代码之家 › 专栏 › 技术社区 › Geo

如何克服IE7填充问题?

internet-explorer-7 css html

Geo · 技术社区 · 16 年前

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中,div id=spotlight中的文本块与FF、Chrome、Safari甚至IE8相比更加正确。有人能发现错误吗?

谢谢,吉欧

注2:我使用的是doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

重要提示:

通过添加边距-右:400px到spot7的问题已经解决了。因为我不知道为什么会发生这种行为,所以我会把第一个给出解释的人作为公认的答案。谢谢你的帮助。

5 回复 | 直到 16 年前

Hogan 16 年前

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

另外,这可能是关于保证金崩溃(但我现在不能告诉你,我刚刚醒来,我现在更像一个僵尸:D)

但是,您没有告诉我们页面是否有效。可能还有一些嵌套元素。所以我觉得最好的办法就是把它放到网上,给我们链接:)

Hogan 16 年前

编辑

解决一个只支持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

Tom 16 年前

表面上看,你的CSS看起来不错。查看所有CSS会很有用,尤其是应用于body的CSS,但这似乎是一个父元素问题。尝试为您的div#spotlightHolder设置固定宽度或百分比宽度。

bcosca 16 年前

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

为什么不把550px的宽度分配给.spotlightholder,这样它就被继承了呢?

Dan Lord 16 年前

我真的很喜欢 blueprint 重新设置css。

它使得跨浏览器获得一致的布局非常容易,并且得到了相当广泛的应用。