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

ProgramBox

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

Post author:admin
Запись опубликована:29 мая, 2023
Post category:Вопросы по программированию

#html #internet-explorer-9 #css

#HTML #internet-explorer-9 #css

Вопрос:

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

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

 <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 работы.

1. Спасибо за это, отсутствующий doctype был проблемой с этой страницей примера. К сожалению, проблема все еще существует для фактического сайта, над которым я работаю. Макет очень похож на приведенный мной пример, но, похоже, ничто из того, что я делаю, не допускает фоновую тень (но вставка работает). Я боюсь, что, возможно, я не смогу найти проблему, и, возможно, это просто то, с чем они живут 🙂

2. Если вас это устраивает, меня это устраивает 🙂 Хотя я рассмотрю это снова, если вы сможете создать тестовый пример (JS Bin), в котором проблема определенно возникает.

3. Хорошо, я провел еще некоторое расследование и выяснил, в чем проблема … вздох Итак, div, который у меня был на сайте, находился внутри таблицы (макет старой школьной таблицы), для которой border-collapse установлено значение «свернуть». По какой-то причине наличие этого параметра означало, что тень от окна не отображается. Мне просто нужно было отключить свертывание границ, и это сработало… Я попытаюсь опубликовать пример кода здесь, чтобы другие люди могли узнать об этом — хотя спасибо за вашу помощь 🙂

4. Спасибо, что сообщили мне о реальной проблеме, стоящей за этим вопросом, я запомню это для дальнейшего использования.

5. отсутствие doctype не является проблемой — border-collapse является

Ответ №2:

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

Ответ №3:

Решение ошибки ввода IE9-shadow будет работать над этой ошибкой.

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

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

Ответ №4:

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

Ответ №5:

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

1. Упс — извините, но я был не совсем корректен в своем тестировании — кажется, что doctype необходим для работы этих вещей. Но тогда все остальное выходит из строя. Я думаю, что в следующий раз я сначала напишу для IE, а затем для остальных — эй, мэйб, это стратегия Microsoft с самого начала!

2. вместо cellspacing=0 используйте style="border-collapse: separate; border-spacing:0;" для сохранения чистоты-CSS

Ответ №6:

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

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

таблица { граница-свернуть: отдельно;}

tr: nth-дочерний элемент (четный) { / * прозрачный нечетный цвет */
 /* background-color: someothercolor; */ / * тень не отображалась сплошным цветом */
 цвет фона: rgba (168,163,136,.2); 
}

Ответ №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:

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

Также помогло удаление border-collapse из таблицы-контейнера.

Ответ №11:

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

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