IE 8 和 IE 9 给我的 `textarea` 高度小于 `rows` 属性值所要求的

Posted 2023-05-07

【中文标题】IE 8 和 IE 9 给我的 `textarea` 高度小于 `rows` 属性值所要求的

【英文标题】：IE 8 & IE 9 give me the `textarea` of height that is less than requested by `rows` attribute value

【发布时间】：2013-01-27 03:08:59

【问题描述】：

目前致力于跨浏览器兼容性的工作遇到了 IE 范围的问题。

我需要 这样的高度的文本区域，它可以呈现给定的文本没有滚动。因此，我在服务器端和前端获取此类文本的行数：

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

到目前为止，它适用于 Chrome、FF 和 Opera：

但 IE8 就没有这样的运气：

和 IE9：

还有没有办法修复它除了 JS？ 得到html5 doctype 并希望保持我的font-size 值不变。

textarea 的计算样式：

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;

【问题讨论】：

您是否使用任何可能适用于 textarea 的 css？

@Arjan 吨。请查看我更新的问题。

发现问题是由line-height: 20px 引起的。跨浏览器对其进行规范化的一种方法是默认 line-height: normal 但如果我需要其他值怎么办？

你为什么用textarea来显示文本？该元素专为用户输入而设计。很久很久以前，在 CSS 可用之前，它就被用于创建可滚动区域，但在这里你甚至没有这样做——你特别想避免滚动。使用pre 元素会让事情变得更容易。

@JukkaK.Korpela 我需要这些文本是可编辑的。

【参考方案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'))

)

【参考方案2】：

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

【讨论】：

你一直都是对的。见我的answer。我会接受你的，因为这是第一个。谢谢！

【参考方案3】：

我想样式表实际上并不包含white-space: pre，因为这会破坏textarea 的默认呈现（它尊重换行符）。除此之外，我不明白为什么问题会出现在标准模式中。

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

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

但是，在Quirks Mode 中，IE 行为不端：它将height 属性值解释为指定元素占用的总区域的高度，包括填充和边框。因此，4px 的顶部和底部填充以及 2px 的边框需要height: 310px。这反过来又会导致符合标准的浏览器中的间距过大。所以最好在标准模式下工作。检查doctype 字符串中是否存在拼写错误。在 IE 中，可以使用 F12 进入开发者工具，在这里可以查看属性，也可以查看浏览器的模式。

【参考方案4】：

参考jibiel的回答（因缺分暂时无法评论）。

这里是校正所有具有 row 属性的 textareas 高度的代码：

$("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>