Question

我正在使用标题行中应用的CSS渐变（即第一行）创建网格列表。还有边框应用。

在应用渐变滤镜之前，边框在所有浏览器中显示，但在应用渐变滤镜后，IE会隐藏边框！其他浏览器都可以。

下面的CSS代码：

.list tr.titlerow, .list .titlerow th {
    border: 1px solid #a0a0a0;
    height:25px;
    padding:2px;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff');/*For IE7-8-9*/  
    background: -moz-linear-gradient(top, #EBEBEB 0%, #fff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEBEB), color-stop(100%,#fff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* IE10+ */
    background: -o-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */


}

有人可以帮我解决这个问题吗？

Answer 1

IE过滤器通常可以完全搞乱其他东西，没有充分的理由。有时应用一个过滤器会杀死另一个过滤器 - 它们甚至不能很好地相互配合，更不用说合适的CSS了！

我没有使用过滤器并尝试以正确的方式做事，而是使用条件注释或其他类似机制，回归到IE的基于图像的渐变。

Answer 2

尝试这种方式： -

    .list tr.titlerow, .list .titlerow th
    {
        border: 1px solid #a0a0a0;
        height:25px;
        padding:2px;
        background: -moz-linear-gradient(top, #EBEBEB 0%, #fff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEBEB), color-stop(100%,#fff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
        background: -ms-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* IE10+ */
        background: -o-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ 
*/
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff'); /* IE6 & IE7 */ 
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff')";    /* IE8 */ 

    }

Answer 3

只需添加职位：亲属;

.container 
{
    display: table;
    background-color: lightblue;
    border-spacing: 5px 0;
}

.container > a
{
    display: table-cell;
    width: 60px;
    height: 25px;   
   
    border-style: solid;
    border-width: 1px;
    
	border-color:#adae9c;
	background: #e4e7dd; /* Old browsers */
	background: -moz-linear-gradient(top,  #fefefe 0%, #e4e7dd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e4e7dd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fefefe 0%,#e4e7dd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fefefe 0%,#e4e7dd 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fefefe 0%,#e4e7dd 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fefefe 0%,#e4e7dd 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe',endColorstr='#e4e7dd',GradientType=0 ); /* IE6-9 */
    /*get around bug with IE9 that won't render the border if combined with table-cell and using a filter*/
    position: relative;
}

<div class='container'>
    <a>test1</a>
    <a>test2</a>
</div>

当过滤器梯度应用于单元格时，单元格边框在IE9中不显示

3 个答案: