javascript - 将两个 div 堆叠在一起，但面临跨浏览器的点击/背景图像行为问题

Question

我在一个网站上工作，当在任何地方点击时，都会更改单个图像。一个 div 位于另一个 div 之下，两个 div 都覆盖了整个页面，其中 span 包含最重要的图像和标题。

它在 Firefox、Chrome 和 Opera 上完美运行。它在 Edge(又名 IE)上无法显示背景图像或允许我单击我网站的背景并更改图像。在移动设备上，我遇到了与 onclick 类似的问题，只是背景确实出现了。背景是用 javascript 设置的。我的两个 div 元素的 CSS 如下。

.all {
height:100%;
width:100%;
background-size:cover;
position: absolute;
left:0;
top: 0;
}

.loading {
height:100%;
width:100%;
position: absolute;
z-index: 999;
left:0;
top: 0;
}

我的 javascript 是 here ，而其根源显然是我的 html。

我对所有这些都是全新的，所以我确定我缺乏对 div 或其他东西的理解，或者缺乏关于与这些“元素”(？)的跨浏览器兼容性的知识。

如有任何帮助，我们将不胜感激。

Answer 1

我不知道为什么，但似乎 style方法在 IE 中效果不佳。在 IE11 中添加 cssText 对我有用(我没有 Edge):

document.getElementById("all").style.cssText= "height:100%; width:100%; background-size:cover; position: absolute; left:0; top: 0; -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px);";

附言: <center>标签很久以前就被弃用了。使用 css 使元素居中。