innerhtml 的奇怪 Firefox 问题答案

【问题标题】：Strange firefox issue with innerhtmlinnerhtml 的奇怪 Firefox 问题
【发布时间】：2014-10-19 11:55:23
【问题描述】：

我有这段代码：

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 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 中进行了测试

另一个编辑：看来 display:block 隐藏了图像......真的很奇怪。我怎样才能使图像居中？通常我将它设置为阻止并给它一个宽度然后margin：0 auto。没有显示器如何居中？

【问题讨论】：

尝试动态创建样式(element.style.margin='0 auto'; ...)
@ThanasisGrammatopoulos 查看我的新编辑，问题出在 display:block 上。
样式是否需要内联在元素中？你可以给它分配一个类或 ID 并在外部定义样式吗？
display:inline-block; 有效吗？

标签： javascript html css firefox

【解决方案1】：

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

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

为此，我将我的标签和对象标签插入到带有 textalign 中心的 div 中，所有这些都完成了工作。无论如何，谢谢欢呼。

【讨论】：