Question

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

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。

Answer 1

似乎这是IE9中众所周知的错误（？）： 渐变背景“溢出”边框。当使用具有渐变填充的圆角时（这些在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表现并在“顶部”显示边框，背景填充保留在边框内，正如人们所期望的那样。

Answer 2

http://msdn.microsoft.com/en-us/library/ie/jj127314(v=vs.85).aspx

“填充框：背景被绘制在（填充到）填充框内。” 将TH上的背景剪辑属性设置为“填充框”应该可以解决问题

Answer 3

它是TABLE元素的边框折叠，然后是border-width ...

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

3 个答案: