如何在 IE9 中显示带有渐变填充的元素的边框？
[英]How to show borders of th elements with gradient fills in IE9?
问题描述
我希望表格的 header 单元格具有特定的边框颜色和渐变填充。 我希望它看起来像这样：
这是上面的 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。
3 个解决方案
解决方案1
1 2013-03-04 21:28:27
http://msdn.microsoft.com/en-us/library/ie/jj127314(v=vs.85).aspx
“填充框：背景被绘制在（剪辑到）填充框内。” 将 TH 上的背景剪辑属性设置为“填充框”应该可以解决问题
解决方案2
1 已采纳
这似乎是IE9 中的一个众所周知的错误（？）：渐变背景“溢出”边框。 当使用带有渐变填充的圆角时，这一点尤其明显（这些在 Chrome 和 FF 中完美显示，但在 IE 中，渐变填充延伸到圆角之外）。 请参阅此 SO 问题的答案： IE9 边界半径和背景渐变出血。
目前最简单的解决方案是为 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 行为并“在顶部”显示边框，并且背景填充保持在边框内，正如人们所期望的那样。
解决方案3
0 2011-07-06 15:12:22
它是 TABLE 元素上的边框折叠，然后是边框宽度...
IE9不显示表格中组之间的边界
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.