Firefox(v23）在延迟后将图像附加到dom时出现错误(包括JS Fiddle）

Firefox (v23) bug when appending image to dom after delay (JS Fiddle included)

本文关键字：dom 包括 Fiddle JS 错误 延迟 v23 Firefox 图像      更新时间：2023-09-26

firefox中的以下代码导致图像无法显示在正确的位置。（它应该在视频的中心）。它在chrome和其他浏览器中运行良好。如果图像没有附加到DOM，而是在最初加载，或者在页面加载后重新调整窗口大小，那么它也可以工作。

这种情况只发生在firefox中，我无法想出解决方案。（注意：我们需要在javascript中附加图像，因为这是API调用的结果，我们希望在客户端而不是服务器端进行调用）

JS Fiddle Broken:http://jsfiddle.net/B6eYm/

<!DOCTYPE html>
<html>
<head>
<style>
a.video_link
{
    position:relative;
}
img
{
    width: 100%;
}
img.videoPlay
{
    position:absolute;
    left:0;
    display:none;
}
.video-main
{
    width: 49.16%;
    display: block;
    float: left;
}
</style>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<h1>Firefox Bug</h1>
<div class="video-main">
    <a class="video_link" data-video-id="2621309976001" href="javascript:void(0);">
    <img class="videoPlay" src="http://media.democratandchronicle.com/sites/default/files/icon-videoPlay-wide.png"/>
    </a>
</div>
<script type="text/javascript">
    setTimeout(function()
    {
        var video_id = '2621309976001';
        var video_still = 'http://bcdownload.gannett.edgesuite.net/rochester/36517057001/201308/796/36517057001_2637049604001_video-still-for-video-2632520077001.jpg?pubId=36517057001';
        $("a[data-video-id='" + video_id + "']").append('<img src="'+video_still+'" />').find('.videoPlay').show();
    }, 1000);
</script>
</body>
</html>

Js Fiddle工作：http://jsfiddle.net/N9mHe/

<!DOCTYPE html>
<html>
<head>
<style>
a.video_link
{
    position:relative;
}
img
{
    width: 100%;
}
img.videoPlay
{
    position:absolute;
    left:0;
    display:none;
}
.video-main
{
    width: 49.16%;
    display: block;
    float: left
}
</style>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<h1>Firefox Bug</h1>
<div class="video-main">
    <a class="video_link" data-video-id="" href="javascript:void(0);">
    <img style="display: inline;" class="videoPlay" src="http://media.democratandchronicle.com/sites/default/files/icon-videoPlay-wide.png"/>
    <img src="http://bcdownload.gannett.edgesuite.net/rochester/36517057001/201308/796/36517057001_2637049604001_video-still-for-video-2632520077001.jpg?pubId=36517057001" />
    </a>
</div>

</body>
</html>

如果将display:block添加到a.video_link，它应该可以正常工作：

http://jsfiddle.net/B6eYm/1/

相关文章：