输入IE8内的不可见文本答案

【问题标题】：Invisible text inside input IE8输入IE8内的不可见文本
【发布时间】：2014-12-03 05:53:05
【问题描述】：

我遇到了 IE8 的一些神奇行为。对话框中有登录表单，输入中的文本在用户输入时不会立即显示，而是在一段时间后显示。光标正在移动，但文本不可见。它仅发生在对话框内的输入中，仅在页面上的输入效果很好。为了显示对话框，使用了以下引导函数$dialogElement.dialog('show') 你有什么想法吗，为什么会这样？如果需要，我可以提供更多详细信息。

谢谢

这里是site，您可以在登录对话框中注意到问题

这是example的行为

【问题讨论】：

我知道这听起来很愚蠢......但你没有白色背景的白色文字，是吗？如果没有请提供链接。
如果您可以在小提琴中重新创建此问题，或提供代码示例，这可能有助于理解问题，并使其更易于解决。如果你能提供，我去看看。
我希望它如此简单，但不，它不是白色文本，在其他浏览器上一切正常。我什至无法在 IE9 的 IE8 模拟器模式下重现它，只能在原始 IE8 上重现。您可以尝试在 photofeed.com 的登录对话框中复制它。
只是一个想法：这可能是占位符 polyfill 脚本中的错误吗？
不，我试图从输入中删除占位符，仍然是同样的问题。

标签： input internet-explorer-8 modal-dialog

【解决方案1】：

我知道这本身不是一个答案，但我会改进它，因为会给出更多细节，因为......

我刚刚在装有 Windows XP、IE8 的测试虚拟机上试用了您的网站。

您的登录表单（您在截屏视频中显示的那个）工作正常。完全没有问题。

文本（和密码字段上的项目符号）在我键入时出现。

您使用的是 Windows XP 或更新的操作系统吗？您是否尝试过不同的机器/虚拟机？

这可能是您的环境设置的问题吗？

（在我能够复制错误行为之前，我无能为力）。

顺便说一句：事实证明，在不同的环境中尝试时，只有少数设置会出现问题，而在大多数 IE8 设置中则不会。

这可能取决于显卡、某些 DLL 或配置文件丢失、配置错误、损坏......所有这些通常都会导致 Windows 机器出现问题。

在这种情况下，您可以考虑忽略该问题。

【讨论】：

是的，这很有趣，但我也无法在虚拟机上重现它，只能在安装了win XP的机器上重现，不要问我为什么，它只是发生了，神奇！
嗯...把物理机寄给我。你离意大利远吗？ :-)（我更新了我的答案。）
我来自白俄罗斯，但问题出现在印度的测试人员方面。也许问题与特定的操作系统有关，我会尝试调查这个选项。谢谢。
告诉测试人员在干净（新安装的）机器或虚拟机上测试站点。他很可能不会看到任何问题，而你已经完成了。
也许在一个完美的世界里。但是，如果可以在这台特定机器上重现错误 - 它可以在另一台机器上重现。我同意这并不重要，但很烦人。

【解决方案2】：

在搜索了同类问题后，我找到了两种可能的解决方案。您可以尝试遵循这些。如果这不起作用，我不确定是否可以为您做更多事情，而无法访问 css。

Passwords showing up as white (or not at all) in IE

Dynamic Elements are not appearing in IE8 until there is a mouse click

让我知道这些解决方案是否适合您。

正如我在评论中所述，另一种解决方案可能是使用 javascript 隐藏弹出窗口，而不是在 CSS 中使用 display: none;。这样，元素首先被浏览器渲染，之后它会被隐藏。如果通过 CSS 隐藏，则元素不会被渲染，直到显示出来。

在您的情况下，这意味着您可以删除以下 CSS

.hide {
    display: none;
}

并在页面加载后立即通过 javascript 隐藏元素 .hide。

【讨论】：

感谢您的链接，但它对我不起作用。首先仅用于密码，但我也遇到常规输入问题。第二个 - 没有帮助。顺便一提。我刚刚意识到在模态窗口中显示文本但速度非常慢。视频链接已添加到问题中
您可以在初始化时尝试在 javascript 中隐藏元素，而不是通过 CSS。这样，元素首先渲染，然后隐藏，而不是一开始根本不渲染。如果这没有帮助，那么我不确定我是否真的能提供帮助，而无需查看代码并且能够对其进行编辑。
使用了引导模式，正如你所说，它使用javascript改变了容器的可见性。如果检查元素'#loginDialog'，您可以在页面上看到它，element.style 已更改而不是 css 类。不过还是谢谢你的猜测
我不是这个意思。加载页面时，该元素不显示，因为它被 CSS 隐藏。页面加载后，点击链接时会显示 javascript。但是，由于该元素在页面加载时被隐藏，因此尚未呈现。如果您在页面加载后立即隐藏元素，它将首先呈现，然后隐藏。这可能会解决您的问题。
#loginDialog 在页面加载时通过 .hide 隐藏。如果这在页面加载时可见，则问题可能会得到解决。因此，如果您要删除 display: none;从 .hide 中，并通过 javascript 使用类 hide 隐藏 div，这可能会解决它。

【解决方案3】：

来自Benjamin Gruenbaum Dropdownlist text is invisible in IE8

IE8 不支持 textContent 属性。您必须为它填充垫片并改用 innerText。
option.textContent = option.innerText = departments[i][1];

【讨论】：

我不使用 textContent 属性，所以这不是原因。

【解决方案4】：

我也遇到过这个问题，对我来说问题是父元素之一是“绝对定位”（即位置：绝对）。

我注意到登录对话框不再出现在您的主页上，但也许这可能对其他人有所帮助。假设你有这个结构：

<div class="container">
  <div class="dialog">
    <!-- dialog content here -->
  </div>
</div>

你在IE8中遇到不可见文本问题，尝试添加：

<style>
  .container {
    position: absolute;
  }
</style>

【讨论】：

是的。我已更新我的评论以包含针对我的情况的修复。