jquery - 只读文本区域和 IE9 滚动条

Question

我在使用 textareas 只读属性时遇到问题。我使用 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

visible The overflow is not clipped. It renders outside the element's box. This is default

hidden The overflow is clipped, and the rest of the content will be invisible

scroll The overflow is clipped, but a scroll-bar is added to see the rest of the content

auto If overflow is clipped, a scroll-bar should be added to see the rest of the content inherit Specifies that the value of the overflow property should be inherited from the parent element

尝试将“scroll”作为溢出属性的值，如下所示:

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

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

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

并将 overflow:scroll; 放入 ie9.css 中，将 overflow: auto; 放入常规 CSS 中。

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