IE DXImageTransform.Microsoft.Alpha для элементов больших размеров

kidar2 · January 21, 2010

Привет.

Есть абсолютно спозиционированный span размером 100*40000 пикселей. Ему установлен некоторый backgroundColor и прозрачность:

progid:DXImageTransform.Microsoft.Alpha(Opacity=60);

В итоге имеем что span полностью прозрачный, а если размер сделать порядка 30000px то прозрачность с заданным backgroundColor отображается. Проблема проявляется только в IE, в других браузерах через opacity всё нормально.

Кто-нибудь сталкивался с подобным?

psywalker · January 21, 2010

Привет.
Есть абсолютно спозиционированный span размером 100*40000 пикселей. Ему установлен некоторый backgroundColor и прозрачность:
progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
В итоге имеем что span полностью прозрачный, а если размер сделать порядка 30000px то прозрачность с заданным backgroundColor отображается. Проблема проявляется только в IE, в других браузерах через opacity всё нормально.
Кто-нибудь сталкивался с подобным?

Прозрачность я обычно так ставлю

http://psywalker.ru/Forum/opacity/main-2.html

kidar2 · January 21, 2010

Через alpha(Opacity=60) тоже самое (

psywalker · January 21, 2010

Через alpha(Opacity=60) тоже самое (

Давай ссылку

rus · January 21, 2010

Попробуй такой вариант:

.test {
filter:alpha(opacity=30);
/* синтаксис IE4.0*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* синтаксис IE5.5+ (является предпочтительным) */
opacity: 0.5; 
}

Хотя чую что проблема не в этом.

UPD: Волкер опередил

Edited January 21, 2010 by rus

kidar2 · January 21, 2010

Ссылку не могу дать, вот простой пример:

<html>
<style>
.SelectionSpanCssClass
{
    background-color: #D4D9DF !important;
    filter: alpha(Opacity=60);
    height:30px;
    width:40000px;
}
</style>
<body>
<span class="SelectionSpanCssClass">
Нету фона
</span>
</body>
</html>

psywalker · January 21, 2010

Ссылку не могу дать, вот простой пример:

<html>
<style>
.SelectionSpanCssClass
{
    background-color: #D4D9DF !important;
    filter: alpha(Opacity=60);
    height:30px;
    width:40000px;
}
</style>
<body>
<span class="SelectionSpanCssClass">
Нету фона
</span>
</body>
</html>

спан - это строчный элемент, следовательно не поймёт ширину. Это весь код?

Где доктайп?

Давай весь код

Great Rash · January 21, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Arial;
		}

		body {
			margin: 10px;
		}

		.megaspan {
			position: absolute;
			display: block;
			background-color: #D4D9DF !important;
			filter: alpha(Opacity=60);
			height:30px;
			width:32767px;
		}
	</style>
</head>

<body>

	<span class="megaspan">
		нет фона
	</span>

</body>
</html>

Так будет работать. width:32767px; - максимальная ширина контейнера для ИЕ6.

И все-таки вопрос: нафига такая большая ширина?

kidar2 · January 21, 2010

От DOCTYPE не зависит. Я выложил весь код... То что с шириной width:32767px; будет работать мы уже разобрались ). Нам бы надо больше чем 32767px.

А ширина такая большая нужна для следующей задачи: есть таблица, в ней может быть большое кол-во ячеек, таблицу можно просматривать/скроллировать и т.д. и выделять в ней диапазоны ячеек через сверху накладываемый span, так вот и получается что если выделить очень большой диапазон ячеек то и будут такие большие размеры span'a.

Great Rash · January 22, 2010

Какая-то мегатаблица... Юзер тянуть спан не задолбается? Может лучше сделать пагинатор для таблицы? А вообще, кажись, нельзя в ИЕ6 сделать больше ширину...

Great Rash · January 22, 2010

В общем придумал мегахак для ИЕ6.

Надо положить на бекграунд 1х1 пиксельную png24 картинку нужного цвета и включить поддержку png24 в ИЕ6 через VML.

Для полной понятности приведу пример (в нем осталось только заменить картинку, которую я случайно в гугле нашел на однопиксельную полупрозрачную пнгшку):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<script type="text/javascript" src="http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js"></script>

	<script type="text/javascript">
		DD_belatedPNG.fix('.png_bg');
	</script>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Arial;
		}

		body {
			margin: 10px;
		}

		.test {
			height: 100px;
			width: 40000px;
			background: url('http://koivi.com/ie-png-transparency/test.png');
		}
	</style>
</head>

<body>

	<div class="test png_bg">
		test
	</div>

</body>
</html>

Думаю из кода видно что к чему.

kidar2 · January 25, 2010

>Какая-то мегатаблица... Юзер тянуть спан не задолбается?

При клике по заголовку строки выделяется вся строка таблицы, вот так и получается мегаспан.

Через картинку тоже думали... но решили сделать несколько по-другому:

В Span запихали ещё несколько span'ов с размерами меньше, чем ограничение max ширины контейнера в IE. Затем у этих дочерних span'ов выставляем прозрачность.

Всем спасибо !

Edited January 25, 2010 by kidar2

user · January 25, 2010

А не проще ставить стиль для нужной строки.

kidar2 · January 25, 2010

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

user · January 26, 2010

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

Стили для ячеек таблицы.

Sign In

IE DXImageTransform.Microsoft.Alpha для элементов больших размеров

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information