IE对具有透明背景的元素的z-index问题

Question

大家好。我需要两个绝对定位的文本框，一个放在另一个上面。 这是我的示例：

<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下面。在Firefox和Chrome中可以实现，但在IE（测试了8和9）中，txt1是可点击的并变为焦点。

有人知道如何解决这个问题吗？

提前感谢！

- Michael

---

尝试将两个文本区域放在不同的 div 中，以验证其功能。 - Pal Singh

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);

- My Head Hurts

---

@Michael 没问题 - 我也曾经遇到过IE的问题，所以现在我知道它的大部分缺陷了 :) 别忘了接受答案，这样其他人就知道这是一个可行的解决方案。 - My Head Hurts

提示：你可以在IE 8及更高版本中使用数据URI，其中包含一个1像素乘1像素透明gif文件作为背景图片的重复。CSS规则如下：background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); - Ryan

@Ryan 很棒。答案中应该包含它。 - Ross

现在已经是2014年底了，标准委员会正在使用完全不同的语法（尚未被IE支持）重新编写过滤器。因此，我选择透明图像解决方案，以避免未来过滤器语法带来的问题。 - Guy Schalnat

Answer 2

这个 Bug 在使用 IE11 模拟成 IE10 时仍存在。我做了一个纯 CSS 的解决方法，强制设置背景颜色并进行如下处理：

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

当然，我忘记了IE7。

- Pedro Alonso

---

我认为IE 10不支持-ms-filter？（http://msdn.microsoft.com/en-us/library/ie/ms530752%28v=vs.85%29.aspx） - Guy Schalnat

Answer 3

这是一个非常有趣的错误，我以前从未遇到过。IE 表现得好像上面的块根本不存在，因为它没有被可视化呈现。

我觉得在 FF/Webkit 中它能够工作很奇怪，因为 none 是 background-image 属性的一种设置。这应该在属性的简写版本中可以正常工作，但我认为它也应该将 background-color 设置为默认值（通常为白色）。无论如何，我想我错了。将 background 或 background-color 设置为 transparent 也无法解决问题。

这里有一个小小的解决方法：不要指定 background: none，而是使用 background-color: rgba(255, 255, 255, 0)。这将给您一个透明的背景。不幸的是，它只在 IE9 中有效。

- user166560