关于字体大小更改的 IE textarea 行高问题

Question

I have a textarea and some links that use JavaScript to change the font size in the textarea.我有一个文本区域和一些使用 JavaScript 更改文本区域中字体大小的链接。 In Firefox, this works absolutely fine, but in IE, the line-height does not change.在 Firefox 中，这绝对可以正常工作，但在 IE 中，行高不会改变。 So, when the font shrinks, there are big gaps between the lines of text.因此，当字体缩小时，文本行之间会出现很大的间隙。 When the font grows, the lines of text overlap.当字体变大时，文本行重叠。

I have tried adding in code to reset the line height to 1.5 x the font size, but it doesn't seem to accept it.我尝试添加代码以将行高重置为字体大小的 1.5 倍，但它似乎不接受它。

Here is my code:这是我的代码：

HTML HTML

<div class="font">
    <a href="javascript:changeFont(10);" style="font-size: 10px">A</a>
    <a href="javascript:changeFont(13);" style="font-size: 14px">A</a>
    <a href="javascript:changeFont(16);" style="font-size: 18px">A</a>
    <a href="javascript:changeFont(19);" style="font-size: 22px">A</a>
    <a href="javascript:changeFont(22);" style="font-size: 26px">A</a>
    <a href="javascript:changeFont(25);" style="font-size: 30px">A</a>
    <a href="javascript:changeFont(28);" style="font-size: 34px">A</a>
    <a href="javascript:changeFont(31);" style="font-size: 38px">A</a>
    <a href="javascript:changeFont(33);" style="font-size: 42px">A</a>
    <a href="javascript:changeFont(36);" style="font-size: 46px">A</a>
</div>
<textarea class="comment" name="comments" id="comments" placeholder="Message..."><?php if(isset($post_comments)){ echo $post_comments; } ?></textarea>

JavaScript JavaScript

<script>
    <!--
    function changeFont(size) {
        var lh = size * 1.5;
        $('#comments').css('fontSize', size + 'px');
        $('#comments').css('line-height', lh + 'px');
    }
    -->
</script>

Thank you in advance.先感谢您。

Answer 1

Here's the answer (nearly nine years after the question was asked):这是答案（在提出问题后将近九年）：

The issue is that, under certain circumstances using MSHTML (via IE or an HTA), the line height in a textarea box is not automatically adjusted for the font size.问题是，在某些情况下使用 MSHTML（通过 IE 或 HTA），textarea 框中的行高不会根据字体大小自动调整。 In my testing I determined that this issue only occurs with IE=8 and only when the textarea width is set by percentage.在我的测试中，我确定此问题仅发生在 IE=8 且仅当文本区域宽度按百分比设置时。

To see the issue, save the code below on Windows as an HTA file and run it via mshta.exe or save it as an HTM file and run it via iexplore.exe and then use the drop down menu to select size 24. You should see that the lines in the textarea overlap vertically.要查看此问题，请将下面的代码在 Windows 上保存为 HTA 文件并通过 mshta.exe 运行它，或者将其保存为 HTM 文件并通过 iexplore.exe 运行它，然后使用下拉菜单选择大小 24。您应该看到文本区域中的线条垂直重叠。

There are two ways to fix the issue: 1) Change the content= setting to run in any mode, other than IE=8, such as IE=9 (both lower and higher modes work, but typically, you'll want to go up, not down).有两种方法可以解决此问题：1) 将content=设置更改为在除 IE=8 之外的任何模式下运行，例如IE=9 （较低和较高模式均有效，但通常情况下，您会想要向上，而不是向下）。 2) For IE=8 mode, reset the textarea innerText and value each time the font size is changed (see commented code in the example below). 2) 对于IE=8模式，每次改变字体大小时，重置textarea innerText和value （参见下面示例中的注释代码）。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=8">
<style>
#TA1 {width:100%}
</style>
</head>
<body>
<select id=fontsize onchange=changeFont()>
<option value=10>10</option>
<option value=24>24</option>
</select><br>
<textarea id=TA1></textarea>
<script>
var data = "abc\r\n123"
TA1.value = data
function changeFont()
{
  var size = fontsize.options(fontsize.selectedIndex).value;
  //TA1.innerText = ""; //uncomment to fix issue
  //TA1.value = data;   //uncomment to fix issue
  TA1.style.fontSize = size + "pt";
}
</script>
</body>
</html>

关于字体大小更改的 IE textarea 行高问题

问题描述

1 个解决方案

解决方案1
0 2022-12-19 03:41:16

关于字体大小更改的 IE textarea 行高问题

问题描述

1 个解决方案

解决方案1 0 2022-12-19 03:41:16

解决方案1
0 2022-12-19 03:41:16