Fatal编程技术网
  • html/
  • Html 如何在IE9中用渐变填充显示th元素的边界？

Html 如何在IE9中用渐变填充显示th元素的边界？

html css

Html 如何在IE9中用渐变填充显示th元素的边界？,html,css,internet-explorer-9,border,gradient,Html,Css,Internet Explorer 9,Border,Gradient,我希望表格的标题单元格具有特定的边框颜色和渐变填充。我希望它看起来像这样： 以下是上述内容的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&

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

以下是上述内容的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>
它在Chrome 12和Firefox 5中显示得非常完美，但在IE 9中它看起来是这样的：

看起来IE9将渐变填充放在了边界的顶部。如何让IE9在“顶部”显示TH元素的边框

TIA.

这是表格元素上的边框折叠，然后是边框宽度…

这似乎是IE9中一个众所周知的错误（？）：渐变背景“溢出”边框。当使用圆角和渐变填充时，这一点尤其明显（这些在镀铬和FF中显示得非常完美，但在IE中渐变填充延伸到圆角之外）。请参阅此问题的答案：

目前最简单的解决方案是使用在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在“顶部”显示边框，背景填充保持在边框内，正如人们所期望的那样。

“填充框：背景绘制在填充框内（剪裁到填充框上）。”
将TH上的background clip属性设置为“padding box”应该可以做到这一点

这可能是一个边框折叠问题。尝试
th{border collapse:no collapse；
完全正确-但th元素上的边框也必须是set@KyleSevenoaks:尝试了你的建议，但似乎没有任何影响…@user639175:“…但必须设置TH元素的边界”.我已经设置了TH元素的边框宽度、颜色和样式。是否还有其他属性需要设置？@cfouche:您只关心IE9吗？IE8或更低版本重要吗？您好-我已经尝试在TABLE元素上将border collapse设置为no collapse，然后在TABLE和TH元素上设置边框宽度ble组合对我来说很有意义，但我仍然无法看到我在问题中发布的第一张图片的外观。我是否正确理解了你的建议？是的-对不起，我没有帮助-我会在白天做一个关于这个的实验…回复你：）谢谢cfouche工作得很有魅力。真不敢相信IE9会以这种方式呈现过滤器。仍然还有很长的路要走。。。 
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));
}