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

Я старался 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 ответа

Решение

Я применил 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;
        }
Источник

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

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

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

table {
    border-collapse: separate;  
}

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

Источник
Другие вопросы по тегам