疑难杂症：firefox浏览器<textarea rows=1>令人费解的滚动条 -

cuixiping

浏览: 19913 次
性别:
来自: 地球

最近访客更多访客>>

qq421606162

924060929

as12301230

ljj121511307

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

疑难杂症：firefox浏览器<textarea rows=1>令人费解的滚动条

博客分类：

Javascript

浏览器 Firefox Chrome IE Opera

话说天下大事，浏览器诸侯混战，我等开发者追遭殃！

我的火狐版本是 Firefox 3.6.2

开发中碰到这么个事：
产品中要求这么样个输入框，当内容为空或只有1行时，显示看起来是1行的文本框，当内容超过1行的时候，显示为2行的textarea，输入内容超过2行以上，则出现滚动条。

起初，我想，只要设置textarea的rows分别为1或者2就行了，结果事情并非这么简单。
在非Firefox下，（包括IE各版本、Opera、Chrome），都能正常显示rows=1的textarea，右侧能出滚动条，不管内容多少。非火狐浏览器与我的预期一致。
但没料到火狐会这么麻烦。

常言道：外事不决问狗狗，内事不决用百毒。
狗狗了一下，发现很多人为此所扰。

火狐下的textarea主要有这么两个方面的问题：
1、实际显示高度比rows属性值多1行，火狐是为横向滚动条预留的位置，可是没出现横向滚动条的时候，它也占着这么个位置。
2、当rows=1的时候，基本就不会出现滚动条了，不管内容多少行。即使你强行style="overflow:scroll"也没有滚动条。

做的过程中，我还发现，rows=1的时候，textarea滚动条能否出来，还跟textarea的字体大小有关，字体小了也出不来。在我的机子上，font-size如果大于等于15px则能出滚动条，小于等于14px则无论如何出不来滚动条。

上个图给大家看：

代码很简单，是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New</title>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<style type="text/css">
textarea {width: 200px; border: 1px solid #CCCCFF;}
</style>
</head>

<body>

<textarea style="font-size: 16px;" rows="1">AAAA
BBBB
CCCCCCCCCCCCC</textarea>font-size: 16px;
<br />
<textarea style="font-size: 15px;" rows="1">AAAA
BBBB
CCCCCCCCCCCCC</textarea>font-size: 15px;
<br />
<textarea style="font-size: 14px;" rows="1">AAAA
BBBB
CCCCCCCCCCCCC</textarea>font-size: 14px;
<br />
<textarea style="font-size: 13px;" rows="1">AAAA
BBBB
CCCCCCCCCCCCC</textarea>font-size: 13px;
<br />
<textarea rows="1">AAAA
BBBB
CCCCCCCCCCCCC</textarea>font-size不指定

</body>
</html>

然后试验发现，不管是textarea，还是div(设置了overflow-y:scroll) ，只要它的高度不够显示滚动条的上下两块箭头按钮，那么滚动条就不会出现。也就是说，火狐的滚动条的上下箭头按钮不能像其他浏览器那样缩小高度。火狐偷了个懒，没去伸缩那两个按钮，而是直接把滚动条藏了。

分享到：