Question

我设置此fiddle以显示所有浏览器如何呈现红色部分。

奇怪的是，IE7渲染得很好（靠它自己）。

但是，我在一个适用于Firefox，Safari和iPad的新网站（与红色条带相同）上有阴影效果。 IE8。

我发誓我之前已经无数次使用过同样的方法，而且它已经在IE7中运行了。

以下是它在IE7中的外观。条带不会长到正确的高度（使用IE的开发人员工具向我展示了这一点）。他们不只是不重复背景图片。

IE7 http://alexanderdickson.com/hosted/stackoverflow.com/ie7-css-height-100.png

该网站也可供here查看。我正在使用IE8的兼容性视图，我意识到它并不是IE7的1：1，但根据NetRender，这也发生在IE7上。

有人可以请告诉我我做错了吗？

谢谢！

Answer 1

我不确定为什么你会以这种方式应用你的阴影。我通常如何做有一个更宽的容器（包括左/右阴影的宽度）对齐中心（在这种情况下，它是你的#mainContainer div，然后设置一个y重复背景（这是阴影 - 只是一对我会在这个容器中指定另一个div，宽度较小，居中对齐，将包含所有文本。

编辑：刚注意到你的小提琴。我认为这可能不适用于这种情况，因为css冲突，可能来自osCommerce样式表？我会试着看一下......嗯

EDIT2：好的，我已将它追溯到stylesheet.css中的这个特定代码

#login-link,
#logout-link {
    position: absolute;
    bottom: -20px;
    right: 50px;
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

<a href="http://174.121.189.41/~wwwgolf/login.php" id="login-link">Login to GolfBallBusters</a>

这是导致问题的元素的绝对定位。删除样式可以修复阴影问题。：）

编辑修正：这应该解决它。或者至少它是在我的网站布局的精简版上。将#user和＃login-link更改为以下内容：

#user {
    float: right;
    color: #f90;
    position: relative; /* addition */
}

#login-link,
#logout-link {
    position: absolute;
    top: 31px; /* addition */
    /*bottom: -20px; REMOVED */
    right: 50px;
    height: 15px; /* addition */
    white-space: nowrap; /* addition */
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

FIX2：

更改

#user-options .bottom-shadow {
    display: block;
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: -7px;
    #bottom: -5px;
    left: 0;
    background: url(images/layout/shadow-bottom.png) repeat-x;
    z-index: 50;
}

TO

.bottom-shadow {
    width: 100%;
    height: 7px;
    margin-top: -10px;
    background: url(images/layout/shadow-bottom.png) repeat-x;
}

您的HTML布局应为：

    <div id="user-options">
        <div id="choose-your-country">
            <p>Choose your country &gt; </p>         
        </div>

        <div id="user"></div>

        <div id="current-locale">Golf Ball Busters - AU</div>
        <br class="clear">
    </div>
    <div class="bottom-shadow"></div>

注意到我将bottom-shadow更改为div元素并将其移出<div id="user-options">。

Answer 2

尝试给#mainContainer身高：100％

为什么这个元素在IE7的这个例子中不能设置为`height：100％`？

2 个答案: