IE z-index在具有透明背景的元素上出现问题

Question

大家.我需要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是可点击的并且变得焦点.

有谁知道,如何管理这个？

提前致谢!

Answer 1

Internet Explorer与"空"元素不兼容.通过制作background: none并且没有内容,IE将顶部textarea视为不存在.

要解决此问题,您可以使用透明png作为背景:

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

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

编辑

正如@Ryan建议的那样,您可以使用数据URI将transaparent gif添加到背景中,这意味着您不需要创建实际的透明png:

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

如本答案所示,另一种解决方案是添加具有完全不透明度的彩色背景:

background:white; filter:alpha(opacity=1);