Readonly textarea和IE9 Scrollbars

Question

我遇到textareas readonly属性的麻烦。我正在使用JQuery设置属性，如下所示：

$("#mytextarea").prop("readonly", true);

CSS：

textarea { width: 400px; height: 400px; }
textarea[readonly] { overflow: auto; }

HTML：

<textarea id="mytextarea">Lorem ipsum [...] ament.</textarea>

在Internet Explorer 9中，未显示滚动条，因此用户无法读取溢出内容。所有其他主要浏览器的行为都是正确的：该字段不可编辑，但用户可以在其中自由滚动。

如何解决这个问题？

Answer 1

来自http://www.w3schools.com/cssref/pr_pos_overflow.asp

  

可见溢出不会被剪裁。它呈现在元素之外   框。这是默认的

     

隐藏剪辑溢出，剩下的内容将被删除   隐形

     

滚动剪辑溢出，但添加了滚动条以查看   其余内容

     

自动如果剪辑溢出，则应添加滚动条以查看   其余内容继承指定溢出的值   属性应该从父元素继承

尝试使用“scroll”作为溢出属性的值，如下所示：

将overflow: auto;更改为overflow: scroll;

因为它只会在IE9中执行您不想要的操作，并且如果您想保留其他broswer的自动功能。创建两个CSS文件并在HTML中使用此代码：

<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

并将overflow: scroll;放在ie9.css和overflow: auto;内的常规CSS中。

编辑：Scott 建议，我也这样做，尝试阅读此链接http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ...关于如何为每个浏览器合并多个css。这是一个好主意，也是减少HTTP请求的好方法。

Answer 2

将overflow: auto更改为overflow: scroll。