镀铬的Textarea被修剪

时间:2014-08-15 20:17:20

标签: html google-chrome xslt cross-browser

我有以下问题,我有一个XSL,它将XML转换为HTML文件。以下部分导致问题:

<td>
 <textarea style="width:100%; border:0px solid #000;overflow:hidden;height:100%" readonly="yes" scroll="no">
   <xsl:value-of select="$GLBL_TRNS_CMNT" />
 </textarea>
</td>

$GLBL_TRNS_CMNT中文字的长度变化很大。我需要<textarea>根据文本的长度来拟合。这在IE中运行良好,但在Chrome中文本被截断,我只看到前两行。如果我手动将高度更改为500px,那么我可以看到切断部分。任何人都可以告诉我解决这个问题。

1 个答案:

答案 0 :(得分:1)

Textareas不会根据内容自动调整大小。更重要的是,你有overflow:hidden,这意味着任何不适合的部分都应该是不可见的。 Chrome的行为应该如此,IE不是。

你不能用HTML和CSS解决这个问题(更不用说XSLT,它在框之前运行,所以这里没有用来调整它的大小,因为它不知道高度和您正在使用的字体的字形宽度。)

解决此问题的一种方法是创建一个不可见的div元素,该元素会自动调整大小,并将该高度设置为文本框的高度。多个博客条目中解释了如何执行此操作,但this one on ImpressiveWebs, about auto-sizing a textbox to its content非常清晰,易于复制并粘贴到您的情况中。