Expressions IE6 for transparent png

[Shift-Web]

Собственно на днях мною в поисках идеального решения для фикса картинок(не фонов, с ними всё проще: либо png8\gif либо filter) было накопано решение, которое несколько не удовлетворяет критериям универсальности. Собственно, для начала спасибка developer'ам yandex за осмысленную пачку решений.

Сабж выглядит так:

/* PNG 24 Expression */
* body img {
	_visibility:expression(
		function(t) {
			t.runtimeStyle.visibility = 'hidden';
			var png = document.createElement('png');
			png.style.cssText = 'zoom:1; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + t.src + ',sizingMethod=crop);';
			png.appendChild(t.replaceNode(png));
			if( png.parentNode.getAttribute('href') ) {
				var pngclick = document.createElement('pngclick');
				pngclick.style.cssText = 'position:absolute; overflow:hidden; width:expression(runtimeStyle.width = parentNode.offsetWidth); height:expression(runtimeStyle.height = parentNode.offsetHeight);';
				t.parentNode.insertBefore(pngclick,t);
			}
		}(this)
	);
}

проблема сабжа в том, что склонированный и загруженный через фильтр элемент теряет плавучесть. Т.е. если у картинки до срабатывания expression был float, а она не была изолирована индивидуальной обёрткой, то он отстёгивается, что очень огорчает. Я к сожалению имею достаточно редкую потребность подгонять сайты под IE6, но это временами актуально. Хотелось бы подпилить это решение до идеала.

В голову приходит идея с оборачиванием картинки в span на лету, который будет наследовать параметр float и полкчать дополнительный position: relative, но что-то мне подсказывает, что это не идеальный вариант. Ну и конечно же все знают про баги с танцами z-index. Хотелось бы это тоже как то предусмотреть.

Возможно здесь есть знатоки особенностей runtimeStyle и кто-то помнит хитрости с помощью которых можно достичь перетягивания параметра?

[Shift-Web]

Ни у кого нет даже соображений? Или все забили на 6ку? Или никому это не нужно?

[Nekromancer]

Так в чём суть, просто переназначить свойство одного объекта другому?

elem1.runtimeStyle[property] = elem2.runtimeStyle[property];

[Shift-Web]

Так в чём суть, просто переназначить свойство одного объекта другому?

elem1.runtimeStyle[property] = elem2.runtimeStyle[property];

у вас получилось?

[Nekromancer]

Так в чём суть, просто переназначить свойство одного объекта другому?

elem1.runtimeStyle[property] = elem2.runtimeStyle[property];

у вас получилось?

А ну да, эт я с вами немного запутался.

elem1.runtimeStyle[property] = elem2.currentStyle[property]; //for outer style declaration
elem1.runtimeStyle[property] = elem2.style[property]; //for inline style declaration

[Shift-Web]

/* PNG 24 Expression by Yandex: Shifted edition (: */
* html section p img {
	_visibility:expression(
		function(t) {
			t.runtimeStyle.visibility = 'hidden';
			var png = document.createElement('png');
			var flt = 'none';
			if ( t.style.styleFloat ) {
				flt = t.style.styleFloat;
			}
			png.style.cssText = 'zoom:1; display: inline; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + t.src + ',sizingMethod=crop); float: '+ flt +';';
			png.appendChild(t.replaceNode(png));
			if( png.parentNode.getAttribute('href') ) {
				var pngclick = document.createElement('pngclick');
				pngclick.style.cssText = 'position:absolute; overflow:hidden; width:expression(runtimeStyle.width = parentNode.offsetWidth); height:expression(runtimeStyle.height = parentNode.offsetHeight);';
				t.parentNode.insertAfter(pngclick,t);
			}
		}(this)
	);
}

наверное можно шотхэндами переписать и упростить ещё раза в полтора, но мне чет лень ... может позже попилю

elem1.runtimeStyle[property] = elem2.currentStyle[property]; //for outer style declaration
elem1.runtimeStyle[property] = elem2.style[property]; //for inline style declaration

не вариант.

Всё таки осталась проблемка с тем, что если изображение идёт первым, то правый флоат не работает ): Наверное можно попробовать по родительской обёртке отслеживать и вставлять в неё(в начало или конец в зависимости от флоата) и добавить в условие проверку на наличие внешнего стиля. Если кому то нужно -- попробую доковырять. Меня такой вариант в принципе устраивает.

<p><img src="..." alt="bla-bla" style="float: left; margin: 5px;"> Blah-blah-blah</p>

Edited September 19, 2011 by Shift-Web