Chrome vs Firefox之战-表格单元格中的图像叠加[重复]

Posted 2023-03-06

【中文标题】Chrome vs Firefox之战-表格单元格中的图像叠加[重复]

【英文标题】：Chrome vs Firefox battle - Image overlaying in table cell [duplicate]

【发布时间】：2014-01-30 02:39:34

【问题描述】：

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

<tr>
    <td  ></td>
    <td id="upper_logo"  >
    </td>
    <td  ></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 中，此图像在整个窗口中对齐。 铬： 火狐： jsfiddle：click

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

【问题讨论】：

这里的正确解决方案可能是不使用表格。

是否有特定原因您使用脚本来填充该单元格的代码，而不是仅仅标记它？这是动态工具吗？

布道@KevinB，布道！

这是非表格版本，:) jsfiddle.net/SchJF/7 与您的百分比高度/宽度

为您的思想提供一些燃料，请阅读此内容，这很有趣：***.com/questions/83073/…

【参考方案1】：

您遇到了多个问题：

在表格中创建一个动态数组是一个完全可行的选择，但是您这样做的方式（#id 为您的图像）将确保只有一个这些项目实际上被渲染了。

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

另外，我看到您每次调整屏幕大小时都会删除 #upper_logo 的所有元素，并且每次都重新添加 img。绝对不能。

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

【讨论】：

嘿，@Nicholas，我非常感谢您的建议。我用 css 解决了所有问题。

如果您认为我的帖子提供了有效的答案，请您标记为已接受吗？谢谢:-)