ie下textarea背景引发的系列问题

转自:http://blog.csdn.net/aperson111/article/details/4485349

1,ie下面的背景图片滚动问题

假设textarea是200×60,于是我的背景图片就是200×60,但是当textarea的内容比较多,出现滚动条的时候,在ie下面就有了问题,就是下拉后,背景图片是在整个scrollheight的一部分,而不是铺满的,但是别的浏览器不是这样,于是上网搜索,发现有一个滤镜,也没考虑,就用上了:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
src=myImg.png);

效果不错,反正就ie有问题,所以用了这个滤镜。

2,ie下disable滚动条问题

但是若干天后,因为我的textarea是disable掉,不让写,然后再js里面动态判断是否可以写,使disabled=false这样的,但是在ie下,disable的textarea是不能使用滚动条的,于是很无奈,将disable改为readonly,在js里面也改为:

document.getElementById(‘mytext’).readOnly = false;这样来动态改。

3,ie下用了滤镜滚动条问题

但是上面的解决方法引来下面的问题:就是滤镜导致了在readOnly = true的时候,ie下面的滚动条不能用鼠标点击滚动条,只能用中间的滚动轴,这样的问题就严峻了,因为用户可不管这个,于是继续无奈着

4,上网搜了一堆的资料

说什么的都有,比如100% fixed  / background-attachment fixed之类的,效果都不好。因为需要多个浏览器支持

5,最终解决方法

在如此的无奈之下,只能首先放弃滤镜方式。其次,将textarea父节点的div或者td的背景用textarea希望显示的背景,然后textarea里面的属性用:background:transparent;终于可以解决了。