Firefox 中的以下代码导致图像无法显示在正确的位置。（它应该在视频的中心）。它在 chrome 和其他浏览器中运行良好。如果图像未附加到 DOM 但最初加载或在页面加载后重新调整窗口大小，它也可以工作。
这仅在Firefox中发生，我无法提出解决方案。（注意：我们需要在 javascript 中附加图像，因为它是我们想要在客户端而不是服务器端执行 API 调用的结果）
JS 小提琴坏了：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>