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

发布时间:2019-07-11 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了css – 具有透明背景的元素的IE z-index问题脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
大家.
我需要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是可点击的并且变得焦点.

有谁知道,如何管理这个?

提前致谢!

解决方法

Internet Explorer与“空”元素不兼容.通过使背景:无,没有内容,IE将顶级文本区域视为不存在.

要解决这个问题,您可以使用透明的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);

总结

以上是脚本之家为你收集整理的css – 具有透明背景的元素的IE z-index问题全部内容,希望文章能够帮你解决css – 具有透明背景的元素的IE z-index问题所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: