4

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

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

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

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

铬 24.0.1312.57 m

但是 IE8 没有这样的运气：

IE8

和 IE9：

IE9

除了JS还有什么办法解决吗？得到HTML5doctype 并希望保持我的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;
4

4 回答 4

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'))

})
于 2013-02-12T10:33:00.170 回答
0

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

于 2013-02-11T22:21:22.163 回答
0

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

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

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

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

于 2013-02-12T12:55:50.897 回答
0

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

这是用于更正具有 row 属性的所有文本区域的高度的代码：

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

于 2019-01-02T14:09:10.403 回答