HTML – 如何在IE9中使用渐变填充显示元素的边框？

2023年8月3日 231次阅读

我希望表格的标题单元格具有特定的边框颜色和渐变填充.我希望它看起来像这样：

这是上面的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中它看起来像这样：

看起来IE9将渐变填充放在边框的顶部.如何让IE9在顶部显示TH元素的边框？

TIA.

最佳答案 看来这是IE9中一个众所周知的bug(？)：渐变背景“溢出”边框.当使用具有渐变填充的圆角时(这些在Chrome和FF中完美显示,但在IE中,渐变填充在圆角外部延伸),这尤其明显.请参阅此SO问题的答案：
IE9 border-radius and background gradient bleeding.

目前最简单的解决方案是使用在x方向上重复的梯度填充的良好ol’背景图像,如下所示：

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表现并显示“在顶部”的边框,并且背景填充保持在边框内,正如人们所期望的那样.

点赞