网络杂货铺

textarea元素IE下默认有上下滚动条

2011-11-21前端开发 我要评论

IE下有上下滚动条。其它浏览器没有。先看一个示例

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>textarea</title>
</HEAD><span id="more-277"></span>
<BODY>
<textarea></textarea>
</BODY>
</HTML>

textarea没有任何样式,IE6/7/8/9/10下如下

圈住部分可以看到出现了上下滚动条。其它浏览器则没有。在看看overflow的值,

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>textarea</title>
</HEAD>
<BODY>
<textarea></textarea>
<script>
function getStyleProperty(el, name) {
var cssStyleDeclaration, val;
if(window.getComputedStyle) {
cssStyleDeclaration = window.getComputedStyle(el, null);
}else{
cssStyleDeclaration = el.currentStyle;
}
return cssStyleDeclaration.getPropertyValue(name);
}
var area = document.getElementsByTagName('textarea')[0];
var overflowVal = getStyleProperty(area, 'overflow');
alert(overflowVal);
</script>
</BODY>
</HTML>

IE6/7/8/9/10 中弹出的是scroll,其它浏览器则不是。 IE的处理让人很费解,textarea中尚未输入内容就出现了滚动条。如果想去掉,只需设置overflow:auto。

发表评论


无觅相关文章插件,快速提升流量

Top