JQuery не будет исчезать текст, если позиционируется: абсолютный;

Question

У меня есть LI, который я хочу исчезнуть и вернуться обратно. Внутри элемента списка у меня есть текст. Этот текст расположен абсолютно внутри LI.

Загвоздка в том, что в IE8 (IE6 и 7 кажутся нормальными) я могу заставить все исчезать, кроме текста:

http://jsbin.com/esamu/13

Если я удаляю абсолютное позиционирование текстового элемента (в данном случае, символа P), IE8 может затем правильно растушевать текст:

http://jsbin.com/esamu/14

Кто-нибудь знает, почему это? Кто-нибудь знает об исправлении?

UPDATE:

Это кажется общей проблемой в IE8, если текст вообще расположен. Итак, не совсем абсолютный. У меня есть догадка, это связано с ошибкой исчезновения cleartype.

Answer 1

Располагая текст, IE8 не будет наследовать непрозрачность. На самом деле, я не думаю, что это та же проблема, что и у ошибки cleartype.

Я обновил ваш скрипт на тот, который работает: http://jsbin.com/esamu/19

Все, что я сделал, это изменил $ ('li') на $ ('li, p'), чтобы он явно выбирал позиционированный элемент.

Answer 2

Арни и блудница предложили полезные альтернативы.Спасибо!

В конце концов, это довольно глупое решение, которое мы придумали:

В нашем случае у нас есть серия LI, которые содержат изображение с надписью (расположенной) сверху текста.,Мы затухаем весь LI и, когда закончим, мы затихаем в следующем.

Проблема заключалась в том, что текст не исчезал должным образом в IE8 (и, возможно, 7).Исправление состоит в том, что вместо того, чтобы затухать каждый LI, мы вместо этого затухаем в изображение сверху, которое соответствует фону (я называю это «маской затухания IE»).Как только изображение полностью исчезнет, ​​мы поменяем LI на заднем плане, а затем исчезнем изображение перед ним.

Это дает нам точно такой же визуальный вид плюс бонус, который тип остается сглаженным в IE.

Я думаю, что это также может быть использовано для постепенного исчезновения LI в другом (когда одно исчезает в то же время, что и другое), и просто потребуется клонировать 'маску исчезновения IE' для каждого LI.

Answer 3

У меня была такая же проблема с абсолютно позиционированным текстом в ie8 (т.е. с 7, 6 все было в порядке), и я решил ее с помощью присвоения z-индекса выше для элемента с постепенным увеличением и уменьшением для:

$('#fadeoutdiv').css({zIndex:7}).fadeOut(2000); $('#fadeindiv').css({zIndex:6}).fadeOut(2000);

кредит Аль Флеммингу за это решение.

Answer 4

Не уверен, почему, но вы пытались просто добавить метас, чтобы IE * отображался как IE7 для быстрого исправления?