IE8 在视口下方不显示渐变答案

【问题标题】：IE8 not displaying gradients below the viewportIE8 在视口下方不显示渐变
【发布时间】：2011-04-15 22:07:41
【问题描述】：

在我的 Intranet 站点上，我们将升级到 IE8。在 IE6 中，我的显示没有问题，但是，在 IE8 中进行测试时，我发现页面上设置了 filter:gradient 的任何元素都显示为空白。

这是我的样式表的摘录，它对一页上表格的左侧单元格应用了彩色渐变（我设置了其他渐变，它们在 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>

谢谢！如果需要更多信息，请告诉我。

【问题讨论】：

我对此代码进行了测试，并且在 IE8 中“首屏下方”的渐变显示良好 - 您是否在 html 或 body 元素或任何其他 div 上设置了任何高度包含表格？

标签： css internet-explorer background gradient viewport

【解决方案1】：

是的...当页面内容短于视口时，我使用一些 CSS 将页脚放置在页面底部（并在需要滚动时将其内嵌在内容的末尾）。

我删除了负责放置页脚的 css，瞧，渐变按预期显示。这在 IE6 或 FF 中不存在，但由于我们正在转向 IE8 企业标准，我会将这些页面上的设计更改为始终与页脚 css 一起出现的东西。保留页脚放置代码比保留渐变更重要。

感谢您提及这一点 - 我自己从来没有想过这一点 - 我会在设计以后的页面时牢记这一点。

【讨论】：