現在、ブラウザ間の互換性に取り組んでいると、さまざまな IE の問題に遭遇しました。
スクロールせずに特定のテキストをレンダリングするような高さのテキストエリアが必要です。そのため、サーバー側とフロントエンドでそのようなテキストの行を数えます。
<textarea rows="15">...</textarea>
これまでのところ、Chrome、FF、Opera で動作します。
しかし、IE8ではそのような運はありません:
および IE9:
とにかくJS以外にそれを修正する方法はありますか? doctype を取得しましたが、私の値HTML5はそのままにしておきたいと思います。font-size
テキストエリアの計算されたスタイル:
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
color: rgb(167, 169, 172);
cursor: auto;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
height: 300px;
letter-spacing: normal;
line-height: 20px;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 4px;
resize: both;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: middle;
white-space: nowrap;
width: 432.546875px;
word-spacing: 0px;
word-wrap: break-word; # changed to «pre» for IE
writing-mode: lr-tb;