IE8 不在视口下方显示渐变

Question

在我的 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>

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

Answer 1

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

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

感谢您提到这一点 - 我自己绝对不会想到这一点 - 在设计未来的页面时我会牢记这一点。