IE 9 - 更改字体大小后文本框中的文本被截断（百分比）答案

【问题标题】：IE 9 - text in text box got cut off after changing font-size (in percentage)IE 9 - 更改字体大小后文本框中的文本被截断（百分比）
【发布时间】：2012-12-21 00:11:58
【问题描述】：

当我尝试将固定宽度 texx 框的字体大小从 100% 更改为 200% 时，我在 IE 9 中遇到了一个奇怪的行为（而 firefox 工作正常）。输入框中的文本被部分截断。我不知道为什么和

我将源代码和脚本放在下面的网址中。 http://jsfiddle.net/VVyQm/3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />
</head>
<body>
<input style="width:100px;font-size:100%" type="text" value="abc"/>
</body>
</html>

【问题讨论】：

看看这些帖子stackoverflow.com/questions/3883902/…stackoverflow.com/questions/132685/font-size-in-css-or-em

标签： css internet-explorer-9

【解决方案1】：

问题是由jsfiddle环境中的一些设置引起的。直接在 IE 9 中测试以下文档不会出现问题：

<!doctype html>
<meta charset=utf-8>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input style="width:100px;font-size:100%" type="text" value="abc"/>
<script>
$('body').css('font-size', '200%');
</script>

因此，如果问题出现在 jsfiddle 之外的环境中，那么显然是由其他代码引起的，例如正在使用的库或框架。

【讨论】：

您好 Jukka，感谢您的快速回复。确切地说，当我更改由按钮单击触发的字体大小时，就会出现问题。无论在 jsfiddle 内部还是外部，行为都是相同的。我更新了 jsfiddler 链接来演示这个问题。链接是jsfiddle.net/VVyQm/5
@RexChong，似乎是在文档格式化后设置字体大小时出现问题（使用建立的字体大小）。所以在我贴的代码中是看不到的，但是如果把script元素内容改成$(document).ready(function() { $('body').css('font-size', '200%'); });，就会出现。元素的某些属性显然被固定在反映原始字体大小设置的值上——但我看不出它可能是什么。设置line-height 是显而易见的尝试，但没有帮助。

【解决方案2】：

对于 IE，您可以在更改字体大小后刷新输入中的值。之后显示将正确。

<input id="example_id" style="width:100px;font-size:100%" type="text" value="abc"/>
<script>
        $('body').css('font-size', '200%');    <!-- change font size -->
        $('#example_id').val($('#example_id').val()) <!-- refresh value-->
</script>

【讨论】：