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

Question

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

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

654 11

html css css3 internet-explorer-9

11 ответов:

Comments

Ничего не найдено.

thirtydot · Accepted Answer · 2014-05-30 15:59:20

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

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

toyNN · Accepted Answer · 2011-07-23 00:11:28

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

dodortus · Accepted Answer · 2012-08-30 07:12:56

IE9 input box-shadow bug solution будет работать над этой ошибкой.
input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}
border-collapse: separate; что нужно добавить, чтобы решить эту проблему на столах.

Johnny Darvall · Accepted Answer · 2011-09-03 12:17:54

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

Avec · Accepted Answer · 2012-10-19 15:31:21

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

цвет фона блокирует тень, поскольку это, кажется, проблема типа z-индекса. В любом случае мы решили его со значением rgba для цвета. Мы выбираем более темный цвет строки и используем 20% для Альфа-значения, чтобы тень underneat могла быть показана.
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);
}

David Marchelya · Accepted Answer · 2012-11-11 16:26:52

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

Дамян Станчев · Accepted Answer · 2011-11-01 11:01:39

в моем случае ничего не помогало. После нескольких часов отладки я обнаружил, что проблема заключалась в следующем метатеге:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Allisone · Accepted Answer · 2011-11-16 20:07:32

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

dfmiller · Accepted Answer · 2012-10-29 05:49:10

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

Alex · Accepted Answer · 2011-10-06 14:55:04

в моем случае помогло переключение с переходного на строгий XHTML-doctype.

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

Sean · Accepted Answer · 2014-02-14 08:46:14

этот мета-тег решил это для меня. Он также решил другие странные проблемы IE, которые не происходят в Chrome и Firefox:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />