透明背景元素上的 IE z-index 问题

Question

每个人。 我需要 2 个绝对定位的文本区域元素一个一个地放置。 这是我的示例：

<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将透明gif添加到背景，这意味着您不需要创建实际的透明png：

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

另一种解决方案，如建议的在这个答案中，是添加完全不透明的彩色背景：

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

Answer 2

这是一个非常有趣的错误，我以前从未遇到过。 IE 的行为就像顶部的块根本不存在一样，因为它没有以可见方式呈现。

让我觉得奇怪的是它在 FF / Webkit 中工作，因为 none 可以作为 background-image 属性的设置。这在属性的速记版本中应该可以正常工作，但我认为它也应该将背景颜色设置为默认值（通常是白色）。无论如何，我想我在这一点上是错的。将 background 或 background-color 设置为 transparent 并不能解决问题。

这里有一个解决方法：不要指定 background: none，而是使用 background-color: rgba(255, 255, 255, 0)。这会给你一个透明的背景。不幸的是，它仅适用于 IE9。

Answer 3

这个错误仍然存​​在于 IE11 中，模拟 ie 10。我所做的一个纯 css 解决方法是强制背景颜色并使用：

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

当然我忘记了 IE7。