Как я могу разместить дочерний элемент за его родителем в IE7 и более ранних - PullRequest
Новая
       11

Как я могу разместить дочерний элемент за его родителем в IE7 и более ранних

0 голосов
/ 13 октября 2010

Я пытаюсь создать размытую тень (похожую на блочную тень CSS3) в Internet Explorer.Кажется, что наиболее логичный способ сделать это - найти все элементы, которым нужна тень в IE, и внедрить в них новый div, используя jQuery.Этот новый div заполняет то же самое пространство, что и его родитель, и затем может быть размыт с помощью фильтра размытия IE.HTML будет выглядеть примерно так: 

<div id="parent">
    <div class="ie_shadow"></div>
    All visible content goes here.
</div>

И CSS: 

#parent {
    position: relative;
    height: 200px;
    width: 200px;
}
.ie_shadow {
    background: #111;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1; /* has to be at least one less than its parent */
    filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, MakeShadow='true', ShadowOpacity='0.60');
}

Это будет работать отлично (с небольшой настройкой, чтобы убедиться, что перекрытие разных областей работает правильно), кромепоскольку IE7 и более ранние версии не позволяют размещать дочерний элемент за его родителем, независимо от того, как вы установили «position» и «z-index».

Другой вариант - вставитьdiv .ie_shadow либо до, либо после ящика, которому нужна тень, но у него есть свои проблемы.В частности, нет хорошего способа установить ширину (и положение) тени, если это явно не установлено div, которому нужна тень.Этот метод также, кажется, разваливается, если пользователь изменяет размер страницы, так как высота и ширина .ie_shadow устанавливаются явно и не пересчитываются автоматически.

Любая помощь очень ценится.Спасибо!

Редактировать: для живого примера, см. Здесь: http://martinsmucker.com/demo/ie_shadow.html Для тех из нас, кто больше не благословлен IE7, настройка IE8 для отображения страницы в режиме стандартов IE7точно воспроизводит проблему.

1 Ответ

1 голос
/ 05 ноября 2010

Наилучшим ответом, вероятно, будет: «Есть некоторые вещи в IE6 и IE7, которые довольно неработоспособны, и их не легко исправить. Похоже, это один из них».

Очевидно, что это не очень хороший ответ, так что вот что я могу попробовать. Вместо того, чтобы вставлять тень в качестве абсолютно позиционированного дочернего элемента, я оберну элемент с помощью функции wrap() jQuery. 

$(document).ready(function(){
    $('.has_shadow').wrap('<div class="ie_shadow"></div>');
    $('.ie_shadow').each(function(){
        var childwidth = $(this).children('.has_shadow').css('width');
        $(this).css('width', childwidth)
    });
});

Теперь единственная задача - сделать родительский элемент такой же ширины, как и его дочерний элемент. Плавающее это осталось, работает, но у него есть потенциал, чтобы полностью разрушить существующий ранее дизайн страницы. Возможно, можно найти ширину дочернего элемента с помощью javascript и установить для родительского элемента то же значение, но это действительно работает, только если фактический дочерний элемент имеет определенное значение. Я все еще играю с этим, но, похоже, это лучший ответ, который я получу. ;)

...