Chrome：显示：内联怪异......答案

【问题标题】：Chrome: display: inline weirdness...Chrome：显示：内联怪异......
【发布时间】：2014-02-22 17:00:02
【问题描述】：

我遇到了一个非常奇怪的问题，我无法弄清楚到底发生了什么...... 不幸的是，我无法链接到有问题的页面，因为它正在内部开发中，但问题如下：

我的页面有 3 个链接 - A、B 和 C。这些链接中的每一个都指向动态生成的文件，创建这些文件可能需要几秒钟的时间。因此，我们将生成这些文件的功能放在单独的页面上。 A、B、C请求相关页面；当页面生成所需的文件时，它会以用户下载的文件名进行响应。到目前为止，一切顺利 - 所有这些都有效。

为了直观地指示活动，我们在这些操作开始/停止时显示/隐藏一个小 gif。（A、B 和 C 各有自己的图标）。它们通过以下方式启用：

.getElementById().style.display = 'inline';

并通过以下方式禁用：

.getElementById().style.display = 'none';

这非常适合 B 和 C --- 但不适用于 A！

我知道它找到了正确启用的图像（通过 alerts() 以及什么会在一秒钟内变得清晰），并且我知道样式也已设置（出于相同的原因），但 gif 只是没有出现。此外，这仅在 Chrome 中发生 - Firefox 和 IE 都可以正常显示图标。而且，不仅如此 - 如果我使用

.getElementById().style.display = 'block';

而不是

.getElementById().style.display = 'inline';

Chrome 也会显示图像！我不想使用块，因为它会将 gif 移动到它自己的一行，这很丑，但至少它表明我有正确的图像等等。

此外，如果我不通过 JS 更改显示，而是使用 display: inline（而不是当前显示：none）创建 gif，它在 Chrome 中显示得很好。所有这一切让我觉得 JS + Chrome 不知何故是个问题——但我不确定。：/

哦，还有一点奇怪的地方——如果我点击 A，什么都不会发生。如果我再点击 B，那么 A 的 gif 就会出现！

总之我不知道发生了什么，但我希望这里的人能启发我！

提前致谢！

编辑：我已将示例代码放在http://jsbin.com/uzosu3/edit

【问题讨论】：

嗯。您可能希望提供更多的代码 - 例如JavaScript 使用的实际 HTML。 :) 这可能有助于其他人诊断问题。
您能否将渲染后的 xhtml 发布到 jsbin.com 或 jsfiddle.net，否则我们主要是在黑暗中猜测。
很抱歉一开始就没有包含它，但老实说，我认为任何代码都不会有什么好处...无论如何，我已经将这些东西粘贴到了 jsbin.com/uzosu3/edit - 我已经编辑了html 稍微删除任何可能对人敏感的内容，但所有主要元素（不包括实际图片...... :) 都在那里。链接A是带有id =“TGif”的gif的链接，B是下面的链接，然后是C......提前干杯:)

【解决方案1】：

如果您不想使用块，因为它会将图像向下推。

尝试使用

.getElementById().style.display = 'inline-block';

可能想在 IE 浏览器中检查它。

【讨论】：