Chrome与Firefox战斗 - 图像覆盖在表格单元格中

Question

我想用图像填充表格单元格，然后将较小的叠加图像添加到此单元格。
这是html代码的一部分：

<tr>
    <td width="20%" height="15%"></td>
    <td id="upper_logo" width="60%" height="15%">
    </td>
    <td width="20%" height="15%"></td>
</tr>

CSS：

html, body {
margin:0px auto; padding:0;
height:100%;
}

body{
    height: 100%;
}
#upper_logo{
    position: relative;
}

#fff{
    position: absolute;
    right: 0;
    top: 0;
}

和JS：

function draw() {
    $('#upper_logo').empty();
    var height = $('#upper_logo').height();
    var width = $('#upper_logo').width();
    var src = "http://i.imgur.com/5t1VyaQ.png";
    var src_fb = "http://i.imgur.com/cVUcmwx.png";

    var ob = document.createElement("img");
    ob.setAttribute("src", src);
    ob.setAttribute("id", "ob");
    ob.setAttribute("height", height);
    ob.setAttribute("width", width);
    document.getElementById("upper_logo").appendChild(ob);

    var ob_fb = document.createElement("img");
    ob_fb.setAttribute("src", src_fb);
    ob_fb.setAttribute("id", "fff");
    ob_fb.setAttribute("height", height);
    ob_fb.setAttribute("width", height * 0.376);
    document.getElementById("upper_logo").appendChild(ob_fb);
}

draw()

$(window).resize(function () {
    draw();
});

这是问题所在。在Chrome中，facebook图像在单元格中对齐，但在Firefox中，此图像在整个窗口中对齐 Chrome：
Firefox： Jsfiddle：click

请注意，我的网络开发技能很差。如果还有其他方法（我想有），请告诉我们。

Answer 1

您有多个问题：

在表格中创建一个动态数组是一个非常可行的选项，但是你这样做的方式（图片的#id）将确保只有实际上会渲染其中一个项目。

您需要做的是将类映射到每个单独的表格单元格。

此外，我发现每次屏幕调整大小时都会移除#upper_logo的所有元素，并且每次都重新添加img。绝对是禁忌。

我不知道您的其余代码，但您可以仅使用CSS 轻松解决此问题。响应式设计是我的专长之一，如果他们决定调整浏览器的大小，你就会走上几乎无限渲染的道路。