box-shadow в IE9 не рендерится с использованием правильного CSS, работает в Firefox, Chrome - PullRequest
Новая
       0

box-shadow в IE9 не рендерится с использованием правильного CSS, работает в Firefox, Chrome

71 голосов
/ 11 апреля 2011

Я пытаюсь смоделировать объект типа плавающего модального ящика, но у меня проблема с 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 не отображает тень. Я могу изменить его на вставную тень, и она появится, как и должна, но внешняя тень продолжает ускользать от меня.

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

Ответы [ 11 ]

111 голосов
/ 11 апреля 2011

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

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

19 голосов
/ 11 июня 2011

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

4 голосов
/ 08 февраля 2012

Решение для этой ошибки будет работать с IE9. 

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

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

3 голосов
/ 11 ноября 2012

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

3 голосов
/ 19 октября 2012

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);
}
3 голосов
/ 03 сентября 2011

У меня была такая же проблема.На самом деле IE9 не требует какой-либо тип документа для работы этих стилей.Причиной проблемы является «border-collapse: collapse» для таблиц с тенью - используйте cellspacing = 0, тогда это работает - все еще: bugger IE

1 голос
/ 02 февраля 2012

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

1 голос
/ 16 ноября 2011

Да, если вы сделаете некоторый сброс для нескольких 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 или где угоднотень быть.

1 голос
/ 01 ноября 2011

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

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
0 голосов
/ 14 февраля 2014

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Страница:
...