今天在做项目的时候发现一个问题,其实浏览器中设置了背景渐变后又设置了边框都可以正常显示,但是在IE9及其以下的版本中不显示边框
找了一些资料,找到了原因:
例如:
.table th{
border:1px solid #ccc;
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#f5f5f5',GradientType=0);
}
这样写在IE9及以下的版本是不显示边框的
解决办法:
.table th{
border:1px solid #ccc;
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#f5f5f5',GradientType=0);
/*add code*/
background-clip: padding-box;
position:relative;}
完美解决!
原来背景也有边界的:决定背景会盖住哪些部分。
background-clip: border-box background-clip: padding-box background-clip: content-box background-clip: inherit
豁然开朗!