javascript - Div 覆盖在 Firefox 和 Explorer 中不起作用

Question

我有一个 Div 覆盖在另一个之上。它在 Chrome 中完美运行，但在 Firefox 和资源管理器中不显示

我的代码是

JS

  var $card = $("<div></div>").css({
position: "absolute",
width: "100%",
height: "100%",
top: 0,
left: 0,
opacity : 0.8,
z-index:20000,
background: "#ccc url(../images/loader2.gif) no-repeat 50% 50%"
}).appendTo($(".tile").css("position", "relative"));


setTimeout(function(){
$card.remove();
}, 5000);

HTML

<div class="tile">
My code
</div>

类图 block 的 CSS

div.tile {
background: url('../images/tiles-min.png');
background-size: 100% 100%;
background-size: cover;
background-position: center;
padding:0.2em 0.2em;
    width:70%;
    height: 550px;
    display: table;
 }

我做错了什么？

Answer 1

根据 W3

http://www.w3schools.com/jquery/jquery_css.asp

要设置多个 CSS 属性，语法是:

css({"propertyname":"value","propertyname":"value",...});

您的属性名称中缺少“”。

Firefox 的问题可以通过添加 display:table-cell 来解决。

var $card = $("<div>\</div>").css({
"position": "absolute",
"width": "100%",
"height": "100%",
"top": 0,
"left": 0,
"opacity" : 0.8,
"z-index":20000,
"display":"table-cell",
"background": "#ccc url(../images/loader2.gif) no-repeat 50% 50%"
}).appendTo($(".tile").css("position", "relative")); 

div.tile 有一个显示表，因此您需要将 display:table-cell 提供给它的子元素。