Question

在我的Intranet网站上，我们将升级到IE8。在IE6中我没有显示问题，但是，在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>

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

Answer 1

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

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

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

IE8不在视口下方显示渐变

1 个答案: