工作中遇到一个bug: IE8 下textarea 如果带滚动条(height:100px;overflow:scroll-y;),内容高度超过可视区域之后,输入文字,滚动条位置会乱跳。

开始以为是js的问题,查看了代码感觉不是js的问题,于是借助索工具搜索了一番,这个问题感觉很少见,但是搜索之后发现确实有人遇到过这个问题。

也有些许的解决方案,经过几轮测试找到了最终的解决方案:

textarea.fix-scroll{
width: 700px;
min-width: 100%;
max-width: 100%;
}

导致这个bug原因可能有很多,比如给textarea设置一个行高可能会导致这个问题,写textarea样式还是要注意IE8的这个现象了。

相关阅读:IE8 Textarea Bug

本文出自:http://dirt-life.net, 原文地址:http://dirt-life.net/2013/03/07/ie8-textarea-%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%ae%9a%e4%bd%8d%e4%b8%8d%e5%87%86%e8%a7%a3%e5%86%b3%e6%96%b9%e6%b3%95%e4%b8%8d%e6%98%8e%e5%8e%9f%e5%9b%a0/, 感谢原作者分享。


查找的另一个解决方案:

最近在弄的一个项目,其中一个页面需要输入很长的文字,因为文字是纯文本的,所以用了Textarea,在webkit下没有任何问题,结果在IE8下测试时,发现当文本超超出Textarea的大小时,在输入文字的时候,发现滚动条总是乱跳,开始怀疑是js的问题,于是折腾了半天,也没发现js哪里有问题。在网上一搜,好像没多少人遇到这个问题,真是奇葩了。。。。。。最后结合网上的方案,给textarea加上下面的样式

{
height: 500px;
overflow-y: auto;
width: 500px;
min-width: 100%;
max-width:100%;
}

发现滚动条就再也不乱跳了^_^。

虽然问题解决了,但是还是不明白问题出在哪里。。。

参考链接:  http://www.tuicool.com/articles/Y7Rviu

IE8 textarea 滚动条定位不准解决方法的更多相关文章

  1. HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

    HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...

  2. Linux 动态库 undefined symbol 原因定位与解决方法

    在使用动态库开发部署时,遇到最多的问题可能就是 undefined symbol 了,导致这个出现这个问题的原因有多种多样,快速找到原因,采用对应的方法解决是本文写作的目的. 可能的原因 依赖库未找到 ...

  3. kail linux安装软件提示“无法定位软件包”解决方法

    主要是更新源的问题,我安装ibus-pinyin老是提示"无法定位软件包" 最后我用的是163的源: # 源 deb http://mirrors.163.com/debian w ...

  4. PullToRefreshListView加载更多定位的解决方法

    之前项目里,早起用到了PullToRefreshListView,后来一部分用到了RefreshListView,最近在做优化的时候,其中一个问题就是PullToRefreshlistView上拉加载 ...

  5. UI组件--element-ui合计行在横向滚动条下面的解决方法

    使用element-ui合计功能, 因列数较多, 产生横向滚动条: 但是合计行却在滚动条下面, 拖动滚动条合计行不会跟着横向滚动. 在当前页面添加以下样式: <style lang='less' ...

  6. 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

    资料: http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...

  7. IE6,IE7下滚动条没有生效解决方法

    需要加个相对定位 position:relative;

  8. ADO POST时出现“无法为更新定位行,一些值可能已在最后一次读取后已更改”问题的解决方法

    原因有这样几种: 1.在数据库设计时,为某些字段设置了默认值,在修改进行提交以后,数据库会自动修改对应字段的所有行的默认值,从而导致了数据库与数据集中数据的不一致,使ADOQuery无法对数据集进行定 ...

  9. WIN7下vs2010滑轮滚动不正确的解决方法

    win7下vs2010在滚动滑轮时文档滚动条不滚动而是解决方案的滚动条滚动的解决方法, 控制面板>设备和打印机>鼠标设置>滚轮选项卡里面将滚轮功能设置设为只使用office97预设的 ...

随机推荐

  1. python中import失败解决的简单办法

    例如:import pkg_resources失败 可以print sys.path查看,从其他机器上cp -r过来即可,如下例子: 从另外一个正常的机器上scp过来/usr/ali/lib/pyth ...

  2. leanchat-android

    Original: https://github.com/lzwjava/leanchat-android Backup: https://github.com/eltld/leanchat-andr ...

  3. 微信公共服务平台开发(.Net 的实现)10-------地理位置

    微信公共平台中涉及到地理位置的有两种情况:       第一.我发送一个自选的地理位置给微信,然后微信可以自动反馈响应的信息.       第二.让微信获取我们GPS定位地址位置,反馈响应的信息. 首 ...

  4. Redis for Windows(C#缓存)安装和使用

    Redis for Windows(C#缓存)安装和使用 前言 前段时间写过两篇简单的有关Memcached缓存的相关文章,当然了只是入门的如何使用而已.最近这两天又发现了Redis这个神奇的东西,之 ...

  5. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  6. 管理和维护RHCS集群

    导读 管理和维护RHCS集群是一个非常复杂和繁琐的工作,要维护好一个RHCS集群,必须熟悉RHCS的基本运行原理,在集群管理方面,RHCS提供了两种方式:即Luci图形界面方式和命令行方式,这儿重点讲 ...

  7. shell 笔记

    shell 笔记 通配符 没有 '.' [Aa] 表示 A 或者 a ? 表示任意字符 * 表示任意字符串 IFS data='name, sex, rollno, location' oldIFS= ...

  8. 项目源码--Android聚合视频类播放器

    下载源码 技术要点:  1.高效支持主流的视音频格式 2.本地视频的播放与管理 3.聚合电视在线直播 4.聚合优酷.搜狐.乐视.爱奇艺等多种在线视频 5.优质播放,包含播放.暂停,声音.亮度调整等功能 ...

  9. Java String Class Example--reference

    reference:http://examples.javacodegeeks.com/core-java/lang/string/java-string-class-example/ 1. Intr ...

  10. Makefile 中会在多处地方看到 FORCE

    转载:http://blog.csdn.net/wzw88486969/article/details/11739737 在内核的 Makefile 中会在多处地方看到 FORCE ,比如: # vm ...