爲什麼在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％`？

回答

相關問題