欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页

疑难杂症：firefox浏览器令人费解的滚动条 </h1> <div class="wz_info"> <span class="wz_frome"> <a href="/" target="_blank" title="程序员文章站"> 程序员文章站 </a> </span> <span class="wz_time"> 2024-02-03 13:05:10 </span> </div> <div class="wz_smalltext"> ...</div> <div class="content"> 话说天下大事，浏览器诸侯混战，我等开发者追遭殃！ <br><br>我的火狐版本是 Firefox 3.6.2 <br><br>开发中碰到这么个事： <br>产品中要求这么样个输入框，当内容为空或只有1行时，显示看起来是1行的文本框，当内容超过1行的时候，显示为2行的textarea，输入内容超过2行以上，则出现滚动条。 <br><br>起初，我想，只要设置textarea的rows分别为1或者2就行了，结果事情并非这么简单。 <br>在非Firefox下，（包括IE各版本、Opera、Chrome），都能正常显示rows=1的textarea，右侧能出滚动条，不管内容多少。非火狐浏览器与我的预期一致。 <br>但没料到火狐会这么麻烦。 <br><br>常言道：外事不决问狗狗，内事不决用百毒。 <br>狗狗了一下，发现很多人为此所扰。 <br><br>火狐下的textarea主要有这么两个方面的问题： <br>1、实际显示高度比rows属性值多1行，火狐是为横向滚动条预留的位置，可是没出现横向滚动条的时候，它也占着这么个位置。 <br>2、当rows=1的时候，基本就不会出现滚动条了，不管内容多少行。即使你强行style="overflow:scroll"也没有滚动条。 <br><br>做的过程中，我还发现，rows=1的时候，textarea滚动条能否出来，还跟textarea的字体大小有关，字体小了也出不来。在我的机子上，font-size如果大于等于15px则能出滚动条，小于等于14px则无论如何出不来滚动条。 <br><br>上个图给大家看： <br><br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2RsLml0ZXllLmNvbS91cGxvYWQvYXR0YWNobWVudC8yNTgxMzUvY2UzNTQ0ODUtNWJmYi0zMWQ1LWEyYmUtMTk4MTI3YTI5MGRkLmdpZg==" alt="疑难杂症：firefox浏览器<textarea rows=1>令人费解的滚动条博客分类： Javascript 浏览器FirefoxChromeIEOpera " title="疑难杂症：firefox浏览器<textarea rows=1>令人费解的滚动条博客分类： Javascript 浏览器FirefoxChromeIEOpera "><br><br>代码很简单，是这样的： <br><pre name="code" class="html"><!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></pre> <br><br><br>然后试验发现，不管是textarea，还是div(设置了overflow-y:scroll) ，只要它的高度不够显示滚动条的上下两块箭头按钮，那么滚动条就不会出现。也就是说，火狐的滚动条的上下箭头按钮不能像其他浏览器那样缩小高度。火狐偷了个懒，没去伸缩那两个按钮，而是直接把滚动条藏了。 </div> <div class="tags"> 相关标签： <a href="/t/%E6%B5%8F%E8%A7%88%E5%99%A8/" target="_blank"> 浏览器 </a> <a href="/t/Firefox/" target="_blank"> Firefox </a> <a href="/t/Chrome/" target="_blank"> Chrome </a> <a href="/t/IE/" target="_blank"> IE </a> <a href="/t/Opera/" target="_blank"> Opera </a> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/2432961.html"> 配置Subversion1.5.4和Apache2.2 </a> </p> <p> 下一篇： <a href="/article/.html"> </a> </p> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>