internet-explorer - IE 10 中文本输入的异常渲染伪影

Question

当我们在 IE10 中查看我们的程序时，会出现一些非常不寻常的渲染。这在任何其他浏览器(Chrome、Firefox、iOS Safari)中都不会发生，在 IE9 中不会发生，当我将文档模式设置为 IE9 标准时，在 IE10 中也不会发生。

更糟糕的是，它不会发生在我正在试验的 fiddle 中。

这是坏版本的样子:

下面是使用文档模式 IE9 标准的良好版本的外观:

是的，我知道我是在问一个问题，但没有提供任何可重现的代码，但是当我拼命尝试解决这个问题时(我们今天晚些时候发布了一个版本)，我希望有人能给我一些想法。

从 IE 的开发人员工具 View 中复制的立即有问题的代码行是:

<input class="generalTrackWidth" style="width: 167px;" type="text"/>

该类实际上用作 jquery 选择器，并且没有与之关联的 css。

当我查看该元素的样式设置时，它没有显示任何可以解释灰色框和白色外框的内容。填充为 1px，边框为 2px，边距为 0px。输入是表格的一部分，但除此之外没有任何包含会呈现灰色边框和额外白色填充的 div。

我已经尝试使用 CSS 来调整 ms-clear(请参阅 Internet Explorer 10 Windows 8 Remove Text Input and Password Action Icons )，尽管我认为这不是问题所在。事实并非如此，但是当元素获得焦点时出现的 X 看起来也有所不同。

其他混淆变量:此元素是包含在 jQueryUI 对话框中的表格的一部分。我做了一个test fiddle ，但错误不会在那里发生。

另一点可能很重要，这是一个 GWT 元素。有问题的代码是纯 JS/Html，但可能是 GWT 针对每个浏览器的特殊处理的某些部分造成了这个问题。

知道我应该寻找什么吗？

Answer 1

这归结为一个非常初学者的错误。

一个月前，我查看了 <input type="file"> IE 10 的默认值，意识到它们看起来很丑，所以在我的 css 文件中使用以下代码修复了它们:

::-ms-value {
    margin: 5px;
    border-style: groove;
}

::-ms-browse {
    margin: 5px;
}

我认为这对于仅文件输入元素是明确的。正如 ErikLaw 在评论中提到的，-ms-value 适用于所有输入。

修复很简单，我只需要让我的文件输入选择器更加具体。在我的例子中，因为我的文件输入有一个独特的类，我只是将选择器设置为 .uniqueClass::-ms-value和 .uniqueClass::-ms-browse

这真的很难调试，因为 IE 的开发人员工具没有显示 -ms-value (或 -ms-browse )伪类。因此，我没有想到查看我的 css 文件。