как можно кликнуть по позиции: исправлено; высота: 100%; ширина: 100% оверлей в IE8? - PullRequest
3 голосов
/ 10 января 2012

У меня есть ошибка, которую я пытаюсь сузить, и она оказывается тупицей.Я делаю модальное наложение, и в IE8 по какой-то причине я могу нажимать «через», фокусировать входы и выделять текст под ним.

в IE9, FF, Chrome все работает как положено.к сожалению, сокращенный тестовый пример, который я собрал (показанный ниже), прекрасно работает в IE8.кто-нибудь сталкивался с этой ошибкой раньше?в надежде сэкономить время.спасибо!

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background: pink;
                position: fixed;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                opacity: 0.5;
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            }
        </style>
    </head>
    <body>
        <input type="text" />
        <div></div>
    </body>
</html>

Ответы [ 3 ]

5 голосов
/ 06 ноября 2013

Проблема действительно в том, что IE позволяет кликам проходить через прозрачный фон div. Для меня это работает везде:

Просто используйте base64 кодирование прозрачного GIF размером 1x1 пикселя в качестве фона, это останавливает все щелчки / нажатия (также протестировано в IE9 и IE8). Кроме того, это чистый CSS, никаких дополнительных изображений не требуется.

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
2 голосов
/ 17 января 2012

Основной причиной этой проблемы является то, что IE не считает полупрозрачные фоны действительными целями кликов, и поэтому клики передаются элементу под ним.

Для IE у вас должен быть сплошнойЦвет фона или фоновое изображение, чтобы иметь элемент захвата кликов.Как вы обнаружили, фильтры не будут работать.

Обычное дело - использовать прозрачный GIF 1x1 в качестве фонового изображения для IE.Затем элемент будет соответствующим образом фиксировать щелчки.

0 голосов
/ 17 января 2012

понял, я использовал rgba (), а не прозрачность, потому что мне нужен был только фон, чтобы иметь прозрачность.

для IE он генерировал градиентный фильтр, используя -ms-filter, который вызывал проблему. в конечном итоге просто с помощью

background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...