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

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

这个bug仍然在IE11上模仿即10.我做的纯css解决方法是强制使用背景颜色并使用：

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

我当然忘记了IE7。

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

3 个答案:

修改