Переполнение в IE8 не видно (обрезано) из-за фильтра непрозрачности - PullRequest
Новая
       25

Переполнение в IE8 не видно (обрезано) из-за фильтра непрозрачности

2 голосов
/ 21 мая 2011

Я использую jQuery и постепенно исчезаю div с. Отлично работает во всех браузерах, но IE8 (я подозреваю, что и другие версии IE) обрежет div s, которые переполняют внешний 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 Ответ

2 голосов
/ 21 мая 2011

в вашем примере это Doctype или его отсутствие, что приводит к его разрыву в IE8, но в целом это проблема с фильтрами IE, и hasLayout даже при правильном Doctype все еще встречается в IE7. Хотя я не уверен, что именно вы пытаетесь оживить, я нашел обходной путь для примера в вашем OP

Ключ не в том, чтобы располагать div outer, если вам это нужно, оберните его другим 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

...