具有透明背景的元素上的 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 所建议的，您可以使用 data URI 在背景中添加一个透明的 gif，这意味着您不需要创建一个实际的透明 png：

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

另一个解决方案，正如this answer 所建议的那样，是添加一个完全不透明的彩色背景：

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

Answer 2

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

它在 FF / Webkit 中工作让我感到奇怪，因为 none 将是 background-image 属性的设置。这在属性的简写版本中应该可以正常工作，但我认为它也应该将background-color 设置为默认值（通常是白色）。无论如何，我想我错了。将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。