Internet Explorer - CSS box-Shadow на столе не работает для браузера IE - PullRequest
Новая
       28

Internet Explorer - CSS box-Shadow на столе не работает для браузера IE

0 голосов
/ 14 мая 2018

Я попытался box-shadow для tr в таблице и отлично работает для Chrome, но не работает для браузера IE.Я проверил почти все предлагаемые ссылки на Переполнение стека , но не смог найти причину и ответ.

Это пример, который я использовал http://jsfiddle.net/c_Dhananjay/h9tx9tpx/, где я делаю: 

    table tbody tr:hover {
        background-color:#13326b;
        color:#ffffff;
        text-shadow: 1px 2px #000000;
        box-shadow: inset 6px 0px 0px -1px #ff0000;
        -webkit-box-shadow:inset 6px 0px 0px -1px #ff0000;
        -moz-box-shadow:inset 6px 0px 0px -1px #ff0000;
    }

    table tbody tr {
        height:100px;
    }

Я надеюсь, что это может выглядеть как дублирующий вопрос, но надеюсь, что вы укажете правильный путь для решения.

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Я применил box-shadow на td вместо tr с некоторыми изменениями в css и это работает для chrome / safari / IE11 / EDGE

Вот рабочая ссылка: https://jsfiddle.net/h9tx9tpx/2/

Рабочий код: 

      // css file
        table tbody tr {
            background-color:#13326b;
            color:#ffffff;
            text-shadow: 1px 2px #000000;
        }

        table tbody tr {
            height:70px;
        }

        table {
            border-collapse: separate;  
        }

        td:first-child:before{
            box-sizing: border-box;
            content:'';
            position:absolute;

            left:0;
            right:2px;

            display: block;
            height: 60px;
            box-shadow: inset 6px 0px 0px -1px #ff0000;
            -webkit-box-shadow: inset 6px 0px 0px -1px #ff0000;
        }
0 голосов
/ 14 мая 2018

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

table tbody tr:hover td:first-child {  
    -webkit-box-shadow:inset 6px 0px 0px -1px #ff0000;
    -moz-box-shadow:inset 6px 0px 0px -1px #ff0000;
    box-shadow: inset 6px 0px 0px -1px #ff0000;
}

Старый ответ

По данным caniuse.com

Edge и IE до 11 подавляют теневые рамки в таблицах с помощью border-collapse: collapse

Для поддержки теней в IE вам нужно добавить следующий блок кода в таблицу стилей: 

table {
    border-collapse: separate;  
}

В вашем примере это не сильно влияет на стилизацию вашего стола, так что у вас все должно быть в порядке.

...