logo标签列表

如何在IE9中显示具有渐变填充的元素的边框？

htmlcssinternet-explorer-9bordergradient
4
我希望表格的标题单元格具有特定的边框颜色和渐变填充。我想让它看起来像这样： enter image description here 以下是上述内容的HTML代码：
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Column00</th>
                <th>Column01</th>
                <th>Column02</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Feline</td>
                <td>Cat</td>
                <td>Felidae</td>
            </tr>
            <tr>
                <td>Canine</td>
                <td>Dog</td>
                <td>Caninae</td>
            </tr>
            <tr>
                <td>Primate</td>
                <td>Ape</td>
                <td>Primates</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

以下是CSS代码：

table{
    border-collapse: collapse;
}

th{
    border: 3px #449944 solid;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#44bb44'); /* IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#44bb44)); /* Chrome */
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(85,205,85, 1));
}

它在Chrome 12和Firefox 5中显示完美，但在IE 9中看起来像这样：

enter image description here

看起来IE9将梯度填充放在边框上面。如何让IE9将TH元素的边框显示在“上面”？

TIA。

可能是一个边框合并的问题。尝试使用th{ border-collapse: no-collapse;来解决。 - Kyle
但是必须设置TH元素的边框。 - MikeyKennethR
@Kyle Sevenoaks：我尝试了你的建议，但似乎没有影响到任何东西... - user255594
@user639175: "...但是 TH 元素的边框也必须设置。" 我已经设置了 TH 元素的边框宽度、颜色和样式。是否还有其他属性需要设置？ - user255594
@cfouche：你只关心IE9吗？IE8或以下的浏览器无关紧要吗？ - thirtydot
@thirtydot：目前只支持IE9。 - user255594
3个回答
1

看起来这是IE9中一个众所周知的bug (?)：渐变背景“溢出”边框。当使用带有渐变填充的圆角时，这尤其明显（在Chrome和FF中显示完美，但在IE中，渐变填充会延伸到圆角外部）。请参见此SO问题的答案：IE9 border-radius and background gradient bleeding。

目前最简单的解决方案是在IE中使用好老式的渐变填充背景图像，在x方向上重复，如下所示：

table{
    border-collapse: collapse;
}

th{
    border: 3px #449944 solid;
    background-image: url('greenGradient.png');
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#44bb44)); /* Chrome */
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(85,205,85, 1));
}

然后IE表现正常，显示边框“在上面”，背景填充保持在边框内部，就像人们所期望的那样。

谢谢cfouche，非常有效。无法相信IE9会以那种方式呈现过滤器。仍有很长的路要走... - Jacques
1
0

如果在TABLE元素上设置了border-collapse属性，那么border-width...

嗨 - 我尝试在TABLE元素上设置border-collapse为no-collapse，然后以我能想到的所有有意义的组合方式设置TABLE和TH元素的边框宽度，但仍然无法获得我在问题中发布的第一张图片的外观。我是否正确理解了您的建议？ - user255594
是的 - 抱歉我没有帮上忙 - 我会在白天做一个实验...然后再回复你 :) - MikeyKennethR
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接