Граница ячейки не отображается в IE9 при применении градиента фильтра к ячейкам - PullRequest
Новая
       14

Граница ячейки не отображается в IE9 при применении градиента фильтра к ячейкам

3 голосов
/ 07 марта 2012

Я создаю список сетки, используя 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+ */


}

Может кто-нибудь помочь мне исправить это?

Ответы [ 3 ]

4 голосов
/ 07 марта 2012

IE фильтры часто могут полностью испортить другие вещи без уважительной причины.Иногда применение одного фильтра убивает другой фильтр - они даже не очень хорошо играют друг с другом, не говоря уже о правильном CSS!

Вместо того, чтобы использовать фильтр и пытаться делать все правильно, я бы просто вернулся коснованный на изображении градиент для IE с использованием условных комментариев или другого аналогичного механизма.

2 голосов
/ 07 марта 2012

Попробуйте так: - 

    .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 */ 

    }
1 голос
/ 27 августа 2015

Просто добавьте позицию: относительная; 

.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>
...