大家.
我需要2个绝对定位的textarea元素,一个放在另一个上面.
这是我的样本：
我需要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///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
根据this answer的建议,另一个解决方案是添加一个完全不透明的彩色背景：
background:white; filter:alpha(opacity=1);
