Question

Chrome中没有滚动条，但在Firefox和IE中，虽然元素宽度为0，但它不会消失：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Textarea Scrollbar</title>
    <style>
        textarea {
            height: 200px;
            width: 0;
            margin: 0;
            border: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <textarea id="textarea">
        Hello, world!
        ...
    </textarea>
    <input type="text" value="0" id="input" oninput="resize();">
    <script>
        function resize() {
            document.getElementById('textarea').style.width = document.getElementById('input').value + 'px';
        }
    </script>
</body>

</html>

的 DEMO

是什么原因？什么是跨浏览器解决方案，因此textarea在Chrome中表现得像？

Answer 1

在css中尝试使用overflow:hidden;作为文本区域归属ID

Answer 2

修改

的 DEMO

<强>的Javascript

//this function attaches eventListener to the element and it is compatible with legacy browsers as well function attach(element,listener,ev,tf){ if(element.attachEvent) { //support for older IE (IE7 inclusive) element.attachEvent("on"+listener,ev); }else{ //modern browsers element.addEventListener(listener,ev,tf); } } var newInterval; //we use this to set interval and check say every 200 milliseconds //whether the *height* of our *textarea* has changed and if it has //than we set its *overflow* to *auto*, so the *scrollbar* will be //visible, but when the *height* is *less or equal to 200* we set //its *overflow* to *hidden*, so the *scrollbar* isn't visible! var textarea = document.getElementById('textarea'); var input = document.getElementById('input'); //here we check if the value of our input element has changed than we change the width of our textarea attach(input,'input',function(){ textarea.style.width = input.value + 'px'; },false); //when our textarea recieves focus (is clicked on) we start running the interval and //check every 200 milliseconds if the height of the textarea is equal or greater than //200px we set its overflow to auto so the scrollbar becomes visible, and when the //height is equal or less than 200px we set our textareas overflow to hidden, so no //scrollbar is visible attach(textarea,'focus',function(){ newInterval = setInterval(function(){ height = textarea.scrollHeight; if(height>=200){ textarea.style.overflow = 'auto' }else textarea.style.overflow = 'hidden'; },200); },false); //here we clear our interval, as our textarea has lost focus // and there is no need to further run our interval attach(textarea,'blur',function(){ clearInterval(newInterval); },false);

<强> HTML

<textarea id="textarea"> Hello, world! ... </textarea> <input type="text" value="0" id="input" oninput="resize();">

<强> CSS

textarea{ height: 200px; width: 0; margin: 0; border: 0; padding: 0; overflow:hidden; border:1px solid red; }

尽管宽度为0，但Textarea滚动条不会消失;

2 个答案: