我希望表格的标题单元格具有特定的边框颜色和渐变填充。我希望它看起来像这样：
这是上面的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在顶部显示第个元素的边框？
蒂亚。
最佳答案
似乎这是一个众所周知的错误（？）在IE9中：渐变背景“溢出”边框。当使用带有渐变填充的圆角时，这一点尤其明显（这些圆角在chrome和ff中显示得很好，但在ie中渐变填充延伸到圆角之外）。请看这个问题的答案：IE9 border-radius and background gradient bleeding。
目前最简单的解决方案是使用在ie的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的行为和显示边框“在顶部”，背景填充保持在边框内，正如人们所料。