`
zhouyrt
  • 浏览: 1172463 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

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。

  • 大小: 900 Bytes
1
1
分享到:
评论

相关推荐

    textArea滚动条样式

    然而,其默认的滚动条样式在不同浏览器之间存在差异,可能不符合设计师的美观要求或网站的整体风格。本文将详细介绍如何使用JavaScript来实现`textarea`滚动条样式的自定义,以实现跨浏览器的兼容性。 首先,我们...

    IE下textarea默认不显示滚动条的实现代码

    虽然上述方法可以实现在IE浏览器中不显示默认滚动条的目的,但在某些情况下,可能会引起用户体验的一致性问题。例如,用户可能习惯于看到滚动条作为一个提示,表明内容是可以滚动的。如果滚动条在内容实际超出时才...

    ie6,ie7,firefox的textarea滚动条、边框

    1. 浏览器兼容性差异:在讨论IE6、IE7以及Firefox浏览器在实现textarea滚动条和边框显示上的差异时,首先需要指出的是,早期的IE浏览器(IE6、IE7)和Firefox在HTML元素渲染方面存在一定的差异。这会导致同样的CSS...

    用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平

    /* 首先隐藏默认滚动条 */ overflow: auto; -ms-overflow-style: none; scrollbar-width: none; } /* Webkit浏览器的滚动条样式 */ textarea::-webkit-scrollbar { width: 8px; /* 滚动条宽度 */ height: 8px...

    ie特有bug文档

    - **问题描述**:在IE6/7中,如果`form`标签内的某个具有`hasLayout`属性的子元素设置了`margin-left`,则其中的`&lt;input&gt;`或`&lt;textarea&gt;`元素会出现双倍的`margin-left`。 - **解决方案**: - 为`form`标签内的`...

    jquery----TextArea高度自适应

    - 如果不是IE浏览器,先将TextArea的高度设为0,然后获取`scrollHeight`属性,即包含滚动条在内的元素实际高度。 - 根据`minHeight`和`maxHeight`限制最终的高度值,确保不会超出预设范围。 - 最后,设置TextArea的...

    微信小程序 scroll-view隐藏滚动条详解

    在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js  最终显示效果如下; ...

    jquery实现文本框textarea自适应高度

    首先,我们需要理解默认情况下,HTML中的textarea元素有一个固定的大小,当内容超出这个大小时,会出现滚动条。为了改善这种情况,我们可以编写JavaScript代码,使textarea的高度能够根据其内容自动扩展或收缩。 ...

    让textarea自动调整大小的js代码

    `是一个针对IE浏览器的hack,用于隐藏滚动条,因为在我们的实现中,我们希望`textarea`自动调整高度,而不是显示滚动条。 2. **JavaScript事件处理**: - `onkeydown`: 这个事件会在用户按下键盘上的键时触发。在...

    div+css布局中常用方法汇总.pdf

    14. **图片边距问题**:在IE6中,图片默认有额外边距,设置`display:block`可消除此问题。 15. **代码命名约定**:例如,`search`代表搜索,`drop`表示下拉,`theme`代表主题,`tool/toolbar`表示工具栏,`cor/...

    div模拟textarea文本域实现高度自适应效果代码

    即使内容很少,textarea也总是显示滚动条,这在某种程度上影响了用户体验。 为了解决这个问题,我们可以使用JavaScript来动态调整textarea的高度以适应内容的变化。例如,通过克隆一个隐藏的textarea,实时检测文字...

    KODExplorer 芒果云-资源管理器

    - 选中文件时,移动到屏幕可视区域(解决上下左右选中文件滚动条不一致问题) ###ver2.51 `2014/6/22` ---- ####fix bug:(bug解决和程序优化) - 登陆多次密码输入错误验证码bug解决 - 修复漏洞:创建副本加入...

    div+css布局中常用方法汇总.docx

    9. **模拟iframe滚动条**:通过设置`overflow:auto`,可以在一个div中创建类似iframe的滚动条。 10. **浮动和清除浮动**:在嵌套列表中,设置`li`的高度为`auto`,并根据需要清除浮动。子`li`的`float:none`和子`ul...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...

    网页设计与制作(HTML+CSS).docx

    4. 浮动元素与浏览器兼容性:在早期的IE6浏览器中,浮动元素的外边距问题,即“双边距bug”,会导致设置的外边距变为两倍。 5. 内容溢出处理:在CSS中,`overflow`属性用于处理内容超出容器时的行为。`overflow:...

    禅道项目管理软件6.3版

    2104 优化火狐下模态框弹出时滚动条不断滚动出现的问题 2103 一键安装包里增加xampp的链接和相应说明 2102 导出excel、csv界面,默认都显示编码选项 2101 需求的详情页面把项目任务和需求的一生位置交换 2100 需求...

    hasLayout引发的CSS Bug表

    - 对于IE6和IE7中的滚动条问题,可以将overflow设置为hidden,并在body标签上添加 Overflow: hidden; *height: 0。 - 解决hasLayout元素子元素出现加倍margin-left的问题,可以通过调整margin-left的值或使用*margin...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试代码(三) 18.4 多选考试题 18.5 ...

Global site tag (gtag.js) - Google Analytics