IE8在視口下方不顯示漸變

在我的Intranet站點上，我們將升級到IE8。在IE6中我沒有顯示問題，但是，在IE8中測試時，我發現頁面上有一個過濾器：漸變設置的任何元素都顯示爲空白。IE8在視口下方不顯示漸變

這裏是我的樣式表的摘錄一個頁面上適用的彩色漸變到表的左邊細胞（也有說我已設定的其他梯度和他們都做在IE8同樣的事情）：

div.render, .render { 
    background:transparent; 
    position:relative; 
    z-index:5000; 
    } 
#web { border-top: 2px solid #3868A0; } 
.dlblue, .dlred, .dlgreen, .dlteal { 
    color:#FFFFFF; 
    font-weight:normal; 
    width:30px; 
    padding: 5px 10px 5px 2px; 
    line-height: 18px; 
    background-color:#EEEEEE; 
    overflow:auto; 
    } 
.dlblue div, .dlred div, .dlgreen div, .dlteal div { 
    text-align:center; 
    text-shadow: -1px 1px 0px #FFFFFF; 
    height:1em; 
    filter:progid:DXImageTransform.Microsoft.Shadow(Color=#FFFFFF, Direction=135, Strength=1); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color=#FFFFFF, Direction=135, Strength=1)"; 
    /*filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#FFFFFF, Positive='true'); 
    -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#FFFFFF, Positive='true')";*/ 
    } 
.dlblue { 
    color:#164680; 
    border-left: 2px solid #3868A0; 
    background: -moz-linear-gradient(left, #3868A0, #FFFFFF), #3868A0; 
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF3868A0, endColorstr=#FFFFFFFF); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF3868A0, endColorstr=#FFFFFFFF)"; 
    } 
.dlred { 
    color:#990011; 
    border-left: 2px solid #CC0033; 
    background: -moz-linear-gradient(left, #CC0033, #FFFFFF), #CC0033; 
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FFCC0033, endColorstr=#FFFFFFFF); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FFCC0033, endColorstr=#FFFFFFFF)"; 
    } 
.dlgreen { 
    color:#266006; 
    border-left: 2px solid #488028; 
    background: -moz-linear-gradient(left, #488028, #FFFFFF), #488028; 
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF488028, endColorstr=#FFFFFFFF); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF488028, endColorstr=#FFFFFFFF)"; 
    } 
.dlteal { 
    color:#003640; 
    border-left: 2px solid #005860; 
    background: -moz-linear-gradient(left, #005860, #FFFFFF), #005860; 
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF005860, endColorstr=#FFFFFFFF); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF005860, endColorstr=#FFFFFFFF)"; 
    }

我試過了所有我能想到的東西，讓它在頁面上正確顯示，但是，沒有任何東西會獲得最初位於視口下方的任何元素的漸變。這只是一個IE8的錯誤？如果是這樣，我會找到另一種方式來設置這些項目。如果沒有，我會接受有關如何解決問題的建議。

下面是使用樣式的表格之一（div渲染用於修復IE中的文本古怪 - 梯度問題存在或不存在應用，PHP只是在文本中垂直渲染文本列）：

<table border="0" cellpadding="3" cellspacing="0" width="90%">  
<tr valign="top"><td ID="web" class="dlblue" width="25"><div class="render"> 
<img src="/icons/space.gif" width="30" height="1" alt="" border="0"><br> 
<? 
$browsertext = 'BROWSER TOOLS '; 
$browsertools = wordwrap(preg_replace("/\s| |&nbsp;/", " ", $browsertext), 1, "<br>\n", true); 
echo $browsertools; 
?> 
</div></td> 
<td ID="web">... other content for the table</td></tr> 
</table>

謝謝！讓我知道是否需要更多信息。

來源

2011-04-15 Debbie

我跑了這段代碼的測試，並且漸變在IE8中顯示得很好「在摺疊下面」 - 你有沒有在'html'，或'body'元素或任何其他包含表格的div上設置高度？ – clairesuzy 2011-04-17 10:41:37

是的......當頁面內容比視口短（並且在需要滾動時將內容放在內容結尾處）時，我使用一些css來將頁腳定位在頁面底部。

我刪除了照顧頁腳位置的CSS，瞧，漸變出現如預期。這並沒有出現在IE6或FF中，但是由於我們正在轉向IE8企業標準，所以我會將這些頁面上的設計更改爲隨着頁腳CSS一直出現的內容。保持頁腳放置代碼比漸變更重要。

感謝您提及 - 我自己從未想到過這一點 - 在設計未來頁面時我會牢記這一點。

來源

2011-04-17 13:57:00 Debbie

IE8在視口下方不顯示漸變

回答

相關問題