textarea元素IE6/7/8/9/10中默认有上下滚动条

最新推荐文章于 2020-05-10 22:38:10 发布

转载最新推荐文章于 2020-05-10 22:38:10 发布 · 127 阅读

本文探讨了在不同浏览器中textarea元素的表现差异，特别是在IE浏览器中出现的意外滚动条现象。通过对比IE与其他浏览器的行为，分析了导致该问题的原因，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<meta charset="utf-8" />
		<title>textarea</title>
	</HEAD>
	<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。

关注博主即可阅读全文