javascript - innerhtml 的奇怪 firefox 问题

Question

我有这段代码:

document.getElementById("refhome").innerHTML = "<img src='Resources/WeFix Wide Logo.png' style='height:128px;margin-left:auto;margin-right:auto;text-align:center;display:block;' />";

现在这段代码在所有浏览器上都能很好地执行。但在 Firefox 中，不。

我尝试在a中手动添加img，还是没有图片。这是一个:

<a id="refhome" href="index.html"><object id="obj1" style="margin:0 auto;display:block;pointer-events:none;width:320px;" type="image/svg+xml" data="Resources/Wefix2.svg"></object></a>

我的 javascript 应该用 img 替换对象，但在 firefox 中不会发生这种情况。即使我手动将 img 添加到 a.但是当我使用不同的 a 标签执行此操作时:

<a id="as" href="#"><img src='Resources/WeFix Wide Logo.png' style='height:128px;margin-left:auto;margin-right:auto;text-align:center;display:block;' /></a>

没问题。真的不明白这是怎么回事。为什么在另一个标签中不起作用？

编辑:

找到了问题，但我不知道如何解决。当我从对象中删除样式属性时，它工作正常并且不需要其他 js 代码。由于某种原因，样式隐藏了 svg，这只发生在 FF 中，我在 Safari、Chrome 和 IE 中测试过

另一个编辑:显示显示: block 隐藏图像......真的很奇怪。我怎样才能使图像居中？通常我将它设置为阻塞并给它一个宽度，然后是 margin:0 auto。我如何在没有显示器的情况下将其居中？

Answer 1

我找到了解决方法，因为显示 block 隐藏了 svg，我使用以下代码将其居中:

 style="display:inline-block;pointer-events:none;width:320px;"

为了让它工作，我将我的 a 标签和对象标签插入到一个带有 textalign center 的 div 中，所有这些都完成了工作。无论如何，谢谢干杯。