IE 10中文本输入的异常渲染工件

Question

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

更糟糕的是，它并没有发生在我正在试验的小提琴中。

以下是坏版本的外观：

以下是使用文档模式IE9标准的好版本：

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

从IE的开发者工具视图中复制的直接违规代码行是：

<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

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

一个月前，我查看了IE 10的<input type="file">默认值，意识到它们看起来很难看，因此使用我的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文件。