4

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

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

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

在此处输入图像描述

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

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

4

3 回答 3

5

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

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

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

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

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

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

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

这是修复的小提琴

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

于 2013-10-10T17:47:23.860 回答
4

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

$('.password').blur(function () {
    //work around for ie10 clipping text
    $(this).val($(this).val());
});
于 2013-10-30T01:19:18.907 回答
2

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

这个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-父元素#details

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

从 jsfiddle 发布代码，因为我必须：

 <!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
于 2013-10-10T17:42:28.177 回答