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

IE中textarea默认滚动条问题

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

weixin_34329187

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

阅读量84

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sprine/p/4475398.html

本文探讨了在IE6至IE10浏览器中textarea元素默认出现上下滚动条的现象，并与其他浏览器的表现进行了对比。通过简单的示例代码展示了如何检查滚动条的存在状态，以及如何通过设置overflow属性来解决此问题。

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>