这是上面的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(start@R_502_6004@str='#ffffff',end@R_502_6004@str='#44bb44'); /* IE */ background: -webkit-gradIEnt(linear,left top,left bottom,from(#ffffff),to(#44bb44)); /* Chrome */ background: -moz-linear-gradIEnt(top,rgba(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,1));} 然后IE表现并显示“在顶部”的边框,并且背景填充保持在边框内,正如人们所期望的那样.
总结以上是内存溢出为你收集整理的HTML – 如何在IE9中使用渐变填充显示元素的边框？全部内容，希望文章能够帮你解决HTML – 如何在IE9中使用渐变填充显示元素的边框？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）