IE 10 会在 100 像素后截断文本框中的文本答案

【问题标题】：IE 10 cuts off text in text box after 100 pxIE 10 会在 100 像素后截断文本框中的文本
【发布时间】：2013-10-30 09:19:18
【问题描述】：

我的文本框使用内联 CSS 指定其宽度应为 200 像素

<input type="text" name="xxx" value="yyy" style="width: 200px;" />

IE 10 如下所示（在文本被截断的地方突出显示）

一旦该文本框获得焦点，所有文本都会变得可见（然后在再次失去焦点后，文本仍然可见）

有人遇到同样的问题并设法解决这个问题吗？

【问题讨论】：

我在 IE10 中尝试过 jsfiddle.net/qDTWw/1 - 我没有看到文本被截断

标签： css input textbox internet-explorer-10

【解决方案1】：

我 99% 确定这与 ie10 中的“清除按钮”有关。

当文本框在 ie10 中获得焦点时，右侧会出现一个小“x”，可让您清除文本。

您可以通过将其添加到样式表来删除 x

::-ms-clear {
display: none;
}

清除按钮的样式很可能有问题。我建议添加我在上面粘贴的样式，看看是否能解决您的问题。

这是一个有点复制您的问题的小提琴（使用糟糕的 css）

http://jsfiddle.net/qDTWw/3/

这里有一个修复方法

http://jsfiddle.net/qDTWw/4/

【讨论】：

我尝试了它作为我尝试的一部分，因为其他人说它有效，但它对我没有任何影响。此外，jsFiddle 示例也没有复制问题。
捕获中没有“x”的事实让我相信情况确实如此。正如我所提到的，可能已经存在一些 CSS 正在破坏这一点。

【解决方案2】：

我在 ie10 的密码框中得到了相同的结果这种解决方法似乎对我有用...

$('.password').blur(function () {
    //work around for ie10 clipping text
    $(this).val($(this).val());
});

【讨论】：

哈哈。如果我只是在控制台上运行它，这也有效，没有模糊。猜猜我可以在加载后的每个页面上编写一个 hack，遍历所有输入框，并将框的值设置为自身。我真的希望它不会变成那样。

【解决方案3】：

*这不是一个真正的“答案”，因为我还没有解决它，但我在这里发布了一些不太适合评论的附加信息。我遇到了同样的问题，希望这能帮助其他人解决这个问题。

这个 jsfiddle 是重现问题的一种方法： http://jsfiddle.net/tj_vantoll/2NGEQ/2/

显然，这是向 Microsoft 报告的： https://connect.microsoft.com/IE/feedback/details/767602/input-text-boxes-clipped-when-a-font-size-is-applied-to-a-parent-element#details

这里引用了微软某人的回复： http://bugs.jqueryui.com/ticket/8677 来自 Tony Ross（微软）：不幸的是，我认为这不会成为我们更新补丁的障碍，因为当用户与控件交互时，问题会自动解决，但我肯定会确保它在下一个版本中保持在我们的关注范围内。至于基于代码的解决方法，如果您愿意，您可以通过多种方式戳输入元素本身以使其更新（更新值，更改内联元素的宽度，分配内联宽度开始，等等）.....

来自 jsfiddle because I have to 的发布代码：

 <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by tj_vantoll</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">  
  <style type='text/css'>
    input { width: 150px; }
form.on input { font-size: 1em; }
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('button').on('click', function(event) {
   $('form').addClass('on');
});
});//]]>
</script>
</head>
<body>
  <form>
    <input type="text" value="Whatever" />
</form>
<button>Break It</button>  
</body>
</html

【讨论】：