Box-shadow на IE9 не отображает с помощью правильного CSS, работает в Firefox, Chrome

Я пытаюсь смоделировать объект типа плавающего модального типа, но с проблемой IE9 и его теневой реализацией.

Вот сводка кода, который я использую, который может дублировать проблему:

<html>
<head>
    <title>Sample page</title>
    <style>
        .content-holder {
            border-collapse: collapse;
        }
        .back {
            background-color: #a8c0ff;
            padding: 100px;
        }

        .inner {
            background-color: #fff;
            text-align: center;
            padding: 50px;
            box-shadow: 0px 0px 20px #000;
        }

    </style>
</head>
<body>
    <table class="content-holder">
        <tr>
            <td>
                <div class="back">
                    <div class="inner">
                        <h2>Heading</h2>
                        <p class="subtext">Some text here</p>
                        <p>More text</p>
                        <a class="button" href="#">A button</a>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

Он отлично работает в Firefox/Chrome и т.д., но IE9 не отображает тень. Я могу изменить его на вставную тень, и он выглядит так, как должен, но внешняя тень продолжает ускользать от меня.

Кто-нибудь может пролить свет на эту проблему?

Ответ 1

Как было обнаружено (не мной) в комментариях, вы должны добавить border-collapse: separate; к элементу, в котором box-shadow не работает.

И из моего первоначального ответа также убедитесь, что у вас есть действительный doctype как самая первая строка, например <!DOCTYPE html>. Нажмите F12, чтобы открыть инструменты для разработчиков, и убедитесь, что режим IE9 (или более поздний) используется, потому что он необходим для работы box-shadow.

Ответ 2

Просто подтверждая эту проблему и 2-ое окончание обхода @Arowin, так как ее могут упустить некоторые люди - добавьте border-collapse:separate; к затронутому <div> - IE9 теперь показывает правильную тень, когда <div> содержится в <table> с border-collapse:collapse;. Спасибо!

Ответ 3

В этой ошибке будет работать решение IE8 с ошибкой ввода-тени IE9.

input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}

border-collapse: separate; - это то, что вам нужно добавить для решения этой проблемы в таблицах.

Ответ 4

У меня была такая же проблема. На самом деле IE9 не требует какого-либо doctype для этих стилей. Что вызывает проблему: "border-collapse: collapse" на таблицах с shadow-use cellspacing = 0, тогда он работает - все еще: bugger IE

Ответ 5

The border-collapse: separate; только частично разрешил это для меня. У нас есть фоновый цвет, добавленный к строкам (tr) и тень под выбранной (и расширенной) строкой.

Фоновый цвет блокирует тень, поскольку она кажется проблемой типа z-index. В любом случае мы решили это с помощью значения rgba для цвета. Мы выбираем более темный цвет строки и используем 20% для значения альфа, чтобы можно было отобразить теневое подтяжку.

table { border-collapse: separate;}

tr:nth-child(even) { /* odd color transparent */
    /* background-color: someothercolor; */ /*shadow did not display thru solid color */
    background-color: rgba(168,163,136,.2);
}

Ответ 6

В моем случае IE 9 предоставлял документ в режиме совместимости, хотя у меня был действительный DOCTYPE. Я отлаживал локально, и IE имеет параметр "Показывать сайты интрасети в представлении совместимости", который был включен, по-видимому, по умолчанию. После отключения этого, все работает так, как ожидалось. Это можно найти в разделе Инструменты → Параметры просмотра совместимости.

Ответ 7

В моем случае ничего не помогло. После нескольких часов отладки я обнаружил, что следующей метатемой была проблема:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Ответ 8

Да, если вы выполните некоторую перезагрузку нескольких элементов html в своем CSS (я сам просто копирую и вставляю материал из старых проектов, не думая о последствиях: D):

html, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, dl, dt, dd, ol, ul,
li, legend, table, tbody, tr, th, td {
    order:0;
    outline:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit; 
    border-spacing: 0;
    border-collapse: collapse;
}

хорошо... вырежьте это ~~border-collapse: collapse~~ и добавьте его как отдельный

table, tbody, tr, th, td {
    border-collapse: collapse;
}

... поэтому он не применяется к вашим div, p, span, img или везде, где вам нужна тень.

Ответ 9

У меня был div, который был внутри ячейки таблицы. Использование border-collapse:separate на div решило проблему для меня.

Ответ 10

В моем случае помогло переключение с Transitional на Strict XHTML-doctype.

С помошью справки удалилась смена границы из таблицы контейнера.

Ответ 11

Этот метатег решил для меня. Он также решает другие странные проблемы IE, которые не встречаются в Chrome и Firefox:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />