IE 9 - 更改字体大小后文本框中的文本被截断（百分比）
Posted
技术标签:
【中文标题】IE 9 - 更改字体大小后文本框中的文本被截断（百分比）【英文标题】：IE 9 - text in text box got cut off after changing font-size (in percentage) 【发布时间】：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>
【问题讨论】：
看看这些帖子***.com/questions/3883902/…***.com/questions/132685/font-size-in-css-or-em 【参考方案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>
【讨论】：
以上是关于IE 9 - 更改字体大小后文本框中的文本被截断（百分比）的主要内容，如果未能解决你的问题，请参考以下文章