Question

我有使用内联CSS指定宽度应为200px

的文本框

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

IE 10将它们显示如下（突出显示文本被截断的地方）

enter image description here

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

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

Answer 1

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

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

您可以通过将x添加到样式表

来删除x

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

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

这是一个小问题，有点复制你的问题（坏css）

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

这是修复

的小提琴

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

Answer 2

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

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

Answer 3

*这不是真的＆＃34; 回答＆＃34;，因为我还没有解决它，但是我在这里发布了其他信息，这些信息赢得了＆＃39;很好地适应评论。我有同样的问题，我希望这有助于其他人弄明白。

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

显然，这是向微软报告的： 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

IE 10在100 px后切断文本框中的文本

3 个答案: