IE 8和IE 9给我的`textarea`的高度比`rows`属性值要小。

Question

目前正在处理跨浏览器兼容性问题，遇到了IE的范围问题。

我需要文本区域有这样的高度，以便呈现给定文本无需滚动。因此，我在服务器端计算这种文本的行数，并在前端获取：

<textarea rows="15">...</textarea>

到目前为止，它可以在Chrome、FF和Opera中工作： 但是在IE8中没有这样的运气： 还有IE9： 除了JS之外，有没有其他方法来解决这个问题？ 已经有HTML5 doctype，并且希望保持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;

- jibiel

---

你是否使用了任何可能应用于文本区域的CSS？ - Arjan

@Arjan 太多了。请看我的更新问题。 - jibiel

发现 line-height: 20px 是问题的原因。一种在各个浏览器中标准化它的方法是使用默认值 line-height: normal，但如果我需要其他值呢？ - jibiel

为什么要使用 textarea 来 显示 文本？该元素是为了 用户输入 而设计的。很久很久以前，它被用于创建可滚动区域，在 CSS 可用之前，但在这里，你甚至不需要滚动。使用 pre 元素会使事情更容易。 - Jukka K. Korpela

@JukkaK.Korpela 很有趣，谢谢。那我该怎么提交呢？我需要一个“表单”。 - jibiel

Answer 1

事实证明，line-height: 20px 是导致问题的原因。在各种浏览器中标准化它的一种方法是将 line-height: normal 作为默认值，但如果我需要其他值怎么办？因此，JavaScript 似乎仍然是唯一的解决方案。以下是一些 jQuery 代码：

<!--[if IE]><script src="ie.js" type="text/javascript"></script><![endif]-->

$(document).ready(function() {

  var textArea = $('textarea'),
      lineHeight = parseFloat(textArea.css('lineHeight'));

  textArea.height(lineHeight * textArea.attr('rows'))

})

- jibiel

Answer 2

也许可以尝试计算CSS高度，并将其添加到盒子的内联样式中。

- moettinger

---

你一直是对的。看看我的答案。我会接受你的，因为它是第一个。谢谢！ - jibiel

Answer 3

我猜测样式表实际上并没有包含white-space: pre，因为这会破坏textarea的默认渲染（它遵循换行符）。除此之外，我不明白为什么问题会出现在标准模式下。

我假设HTML标记（未公开）在最后一行文本之后立即包含</textarea>结束标记。否则，浏览器将暗示内容中有一个空的第16行。（这种浏览器行为违反了HTML 4.01规范，该规范指出，在结束标记之前的换行符应被忽略，但你能做什么呢？）但如果这是问题，那么它也会在Firefox等浏览器上出现。

textarea的height属性设置为300像素，这等于行数（15）乘以行高（20像素），是正确的设置。

然而，在怪异模式下，IE表现不佳：它将height属性的值解释为指定元素占用的总面积的高度，包括填充和边框。因此，4px的上下填充和2px的边框需要height: 310px。这反过来会在符合标准的浏览器中导致过多的间距。因此最好使用标准模式。检查doctype字符串中是否有打字错误。 在IE中，您可以使用F12进入开发人员工具，在那里您可以检查属性并查看浏览器的模式。

- Jukka K. Korpela

Answer 4

参考jibiel的答案（由于缺乏积分，无法发表评论）。

以下是用于纠正具有行属性的所有文本区域高度的代码：

$("textarea[rows]").each( function() {
 $(this).css('height', parseFloat($(this).css('lineHeight')) * $(this).attr('rows') );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- S.P.