IE z-index проблема с элементом с прозрачным фоном - PullRequest
Новая
       16

IE z-index проблема с элементом с прозрачным фоном

6 голосов
/ 02 февраля 2012

все.Мне нужно 2 абсолютно позиционированных элемента textarea, чтобы поместить один поверх другого.Вот мой пример: 

<div>
  <textarea id="txt1" style="position:absolute; top:0; left:0;z-index:0;background:none;">some text</textarea>
  <textarea id="txt2" style="position:absolute; top:0; left:0;z-index:1;background:none;"></textarea>
</div>

Я ожидаю, что txt1 будет ниже txt2.Это происходит в FF и Chrome.Но в IE (проверено в 8 и 9) txt1 кликабелен и становится фокусом.

Кто-нибудь знает, как это сделать?

Заранее спасибо!

Ответы [ 3 ]

12 голосов
/ 02 февраля 2012

Internet Explorer плохо работает с «пустыми» элементами.Делая background: none и не имея содержимого, IE обрабатывает верхнюю textarea так, как если бы ее там не было.

Чтобы обойти это, вместо этого можно использовать прозрачный png для фона: 

background: url(/images/transparent.png) repeat scroll 0 0 transparent;

JSFiddle: http://jsfiddle.net/j8Gkd/

Редактировать

В соответствии с предложением @Ryan вы можете использовать URI данных, чтобы добавить прозрачный gif к фону, что означает, что вы делаетене нужно создавать фактический прозрачный png: 

background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7");

Другое решение, как предлагается в этот ответ , состоит в добавлении цветного фона с полной непрозрачностью: 

background:white; filter:alpha(opacity=1);
1 голос
/ 01 июля 2014

Эта ошибка по-прежнему в IE11, эмулирующая до 10. То есть, я использовал чистый обходной путь CSS-фона и работал с: 

background-color: #000;
opacity: 0.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; //IE8 Support

Конечно, я забыл IE7.

1 голос
/ 02 февраля 2012

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

Мне кажется странным, что он работает в FF / Webkit, потому что none будет настройкой для свойства background-image. Это должно работать нормально в сокращенной версии свойства, но я думаю, что также следует оставить для background-color значение по умолчанию (обычно белое). В любом случае, я думаю, что ошибаюсь по этому поводу. И установка background или background-color на transparent не решает проблему.

Вот небольшой обходной путь: вместо указания background: none используйте background-color: rgba(255, 255, 255, 0). Это даст вам прозрачный фон. К сожалению, это работает только в IE9.

...