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

我设置了这个fiddle来显示所有浏览器如何呈现红色的部分。为什么在IE7中的这个例子中这个元素不会设置为`height：100％`？

奇怪的是，IE7渲染罚款（本身）。

但是，我对Firefox，Safari & IE8上的新网站（与红色条相同）有阴影效果。

我发誓我已经使用过无数次这个相同的方法，它已经在IE7中工作。

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

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

该网站还提供here查看。我使用的是IE8的兼容性视图，我认为这不是严格意义上的IE7的1：1，但是我依据NetRender，这也发生在IE7上。

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

谢谢！

来源

2010-08-17 alex

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

编辑：刚才注意到你的小提琴，我认为它可能不适用于这种情况？由于CSS冲突，可能从自从样式表，我会尝试看看deeper..hmm

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和＃登录链接到以下几点：

#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; 
}

.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">。

来源

2010-08-17 05:03:40 Lyon

感谢您的帮助，我刚刚从午餐回来，所以我会看看。 – alex 2010-08-17 06:19:16

里昂，我放置了新的CSS，现在它加载了阴影，但随后它消失了。现在看看，变化是现场的。很奇怪！ – alex 2010-08-17 06:30:04

@alex：这真的很奇怪。我会进一步研究它。 :) – Lyon 2010-08-17 06:59:16

尝试给#main容器高度：100％

来源

2010-08-17 06:21:47 user422495

我有一个'最小高度：100％'就可以了。 – alex 2010-08-17 06:25:47

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

回答

相关问题