Question

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>

Answer 1

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

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

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

1 个答案: