IE 8 中显示的文本区域滚动条答案

【问题标题】：Text area scroll bar being displayed in IE 8IE 8 中显示的文本区域滚动条
【发布时间】：2013-05-20 04:44:28
【问题描述】：

我在表单中使用固定大小的文本区域从用户那里获取输入。即使我已将文本区域的大小调整属性设置为 none，滚动条仍会显示，如图所示。我不希望滚动条显示在文本区域中。

代码在 Firefox 和 chrome 中正常运行，虽然没有任何错误，但在 IE 中却不是..

HTML 代码...

<label for="qual" class="label">Description and Quantification of Impact to the extend possible:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea><br><br>

CSS 代码...

   .label 
            { 
                float: left; 
                width:120px;
                padding:10px 30px;
                <!--font-weight:bold;-->
            }
        textarea
            {
                <!--margin-bottom:90px;
                margin-top:50px";-->
                vertical-align:top;       
            }
        .textarea
            {
                resize :none;
                border: none;
                width: 100%;
                -webkit-box-sizing: border-box;   <!-- <=iOS4, <= Android  2.3 */-->
                -moz-box-sizing: border-box; <!-- FF1+ -->
                 box-sizing: border-box; <!-- Chrome, IE8, Opera, Safari 5.1-->
            }

我在 IE 8 中得到的输出..

即使我不希望出现未选中的滚动条，它仍然会显示出来..

我尝试将代码放在 jsfiddle 中，但它无法在 IE 8 中打开而不会出现错误，这就是我在此处发布代码和图片的原因..

【问题讨论】：

我发现 jsbin.com 在 IE8 中有效。
在 jsfiddle.net 中，至少结果在 IE8 中有效。

标签： html css forms layout internet-explorer-8

【解决方案1】：

只需将 style="overflow-y:hidden" 删除滚动

【讨论】：

【解决方案2】：

resize 与滚动条无关。你正在寻找overflow。

如果您希望滚动条仅在内容足够长可以滚动时出现，请使用overflow:auto

如果要阻止所有滚动，请使用overflow:hidden

【讨论】：

是对的。而且，你也可以是特定的方向。像overflow-x:hidden、overflow-y:hidden 用于水平和垂直滚动条。

【解决方案3】：

只需将overflow: auto; 添加到textarea。
见http://jsfiddle.net/Volker_E/eQF22/2/embedded/result/
您还可以专门为水平 overflow-x: hidden; 或垂直 overflow-y: scroll;（使滚动条始终保持不变）滚动条添加不同的属性。

【讨论】：