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

Question

我有一个文本区域和一些使用 JavaScript 更改文本区域中字体大小的链接。 在 Firefox 中，这绝对可以正常工作，但在 IE 中，行高不会改变。 因此，当字体缩小时，文本行之间会出现很大的间隙。 当字体变大时，文本行重叠。

我尝试添加代码以将行高重置为字体大小的 1.5 倍，但它似乎不接受它。

这是我的代码：

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

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

先感谢您。

Answer 1

这是答案（在提出问题后将近九年）：

问题是，在某些情况下使用 MSHTML（通过 IE 或 HTA），textarea 框中的行高不会根据字体大小自动调整。 在我的测试中，我确定此问题仅发生在 IE=8 且仅当文本区域宽度按百分比设置时。

要查看此问题，请将下面的代码在 Windows 上保存为 HTA 文件并通过 mshta.exe 运行它，或者将其保存为 HTM 文件并通过 iexplore.exe 运行它，然后使用下拉菜单选择大小 24。您应该看到文本区域中的线条垂直重叠。

有两种方法可以解决此问题：1) 将content=设置更改为在除 IE=8 之外的任何模式下运行，例如IE=9 （较低和较高模式均有效，但通常情况下，您会想要向上，而不是向下）。 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