#html #css #internet-explorer #internet-explorer-8 #opacity
#HTML #css #internet-explorer #internet-explorer-8 #непрозрачность
Вопрос:
Я использую jQuery и исчезаю в div секундах. Отлично работает во всех браузерах, но IE8 (я подозреваю, что и другие версии IE также) отключит div файлы, которые переполняют outer div , когда их непрозрачность установлена с помощью filter: alpha(opacity=100) . Если вы скопируете и вставьте следующее в файл и загрузите его с помощью IE8, вы увидите, что синий квадрат обрезается, потому что он переполняет его внешний div .
<html>
<head>
<style>
.outer {
filter: alpha(opacity=100);
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
top: 100px;
left: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
Как я могу заставить это работать, когда внутреннему div разрешено переполняться (да, я пробовал overflow: visible ), и я могу использовать механизм анимации jQuery для непрозрачности?
Комментарии:
1. Я только что попробовал ваш код с IE8, и он действительно переполняется… Вероятно, это связано с вашим кодом jquery, можете ли вы проверить это, пожалуйста?
2. Я скопировал и вставил этот код из html-файла, загруженного в IE8… включен ли у вас режим совместимости?
Ответ №1:
в вашем примере это Doctype или его отсутствие приводит к сбою в IE8, но в целом это проблема с фильтрами IE, и hasLayout даже с правильным Doctype все еще происходит в IE7. Хотя я не уверен, что именно вы пытаетесь анимировать, я придумал обходной путь для примера в вашем OP
Главное, чтобы outer div не был позиционирован, если вам это нужно, оберните его другим div, который «удерживает» позицию. Другая вещь, которую я обнаружил, заключалась в том, что IE также мог бы использовать фильтр непрозрачности для inner div, но вы не можете использовать его в своем реальном коде
вот некоторый обходной код:
CSS
#wrap{ position: absolute; top: 30px; left:150px}
.outer {
filter: alpha(opacity=50);
opacity: 0.5;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
filter: alpha(opacity=50);
top: 100px;
left: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
button {position: absolute; left: 0px; width: 100px;}
HTML
<button>Toggle Fade</button>
<div id="wrap">
<div class="outer">
<div class="inner"></div>
</div>
</div>
jQuery
$(document).ready(function() {
$('button').click(function(e) {
$('.outer, .inner').fadeToggle("slow", "linear");
});
});
Если переключение также не применяется к внутреннему div, то анимация в IE довольно прерывистая, она плавно затушевывает внешний div, но внутренний div просто показывает / скрывает мгновенно
другим браузерам не нужна непрозрачность inner , поскольку они по праву наследуют ее .. так что в этом случае вам решать, нужен ли вам этот фильтр inner
Комментарии:
1. Интересно, что вы упомянули о моей проблеме с IE8 — это отсутствие объявления DOCTYPE. На моем веб-сайте, где это реальная проблема, у меня есть DOCTYPE. Методом проб и ошибок я сузил проблему до приведенного выше кода. Но оказывается, вы правы, добавление DOCTYPE исправляет это в моем тестовом html. Итак, я думаю, мне нужно еще немного сузить реальную проблему. Меня действительно не волнует IE7 для этого.
2. ваше решение на самом деле работает правильно для меня. У меня действительно есть некоторые проблемы с плавностью прозрачности, как вы упомянули, но это связано с фоном outer.. в любом случае, по крайней мере, это хорошо выглядит до и после анимации. Спасибо.