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

Posted 2023-03-06

【中文标题】具有透明背景的元素上的 IE z-index 问题

【英文标题】：IE z-index trouble on element with transparent background

【发布时间】：2012-02-24 23:09:14

【问题描述】：

每个人。 我需要将 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 是可点击的，成为焦点。

有人知道，如何管理吗？

提前致谢！

【问题讨论】：

尝试将两个 textarea 放在单独的 div 中

【参考方案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);

【讨论】：

@Michael 没问题 - 我一直在使用 IE，所以我现在知道其中的大部分缺陷 :) 不要忘记接受答案，以便其他人知道这是一个有效的解决方案跨度>

提示：您可以使用具有 1px x 1px 透明 gif 的数据 URI，其重复最早可追溯到 IE 8。规则如下所示： background: transparent 0 0 repeat scroll url("data:image /gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

@Ryan 美丽。它应该包含在答案中。

现在是 2014 年底，标准的人们正在用完全不同的语法重写过滤器（IE 尚不支持），我将使用透明图像解决方案，所以我不未来过滤器语法有问题。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

我当然忘记了 IE7。

【讨论】：

我以为IE 10不支持-ms-filter？ (msdn.microsoft.com/en-us/library/ie/ms530752%28v=vs.85%29.aspx)