1

当我们在 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 对话框中的表的一部分。我做了一个测试小提琴，但那里没有发生错误。

另一点可能很重要，这是一个 GWT 项目。有问题的代码是纯 JS/Html，但也许 GWT 对每个浏览器的特殊处理的某些部分对此负责。

知道我应该寻找什么吗？

4

1 回答 1

2

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

一个月前，我查看了<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 文件。

于 2013-09-11T22:29:52.520 回答