0

Firefox の次のコードにより、画像が正しい場所に表示されません。（ビデオの中央にある必要があります）。Chrome やその他のブラウザでは正常に動作します。また、画像が DOM に追加されずに最初に読み込まれる場合、またはページの読み込み後にウィンドウのサイズが変更された場合にも機能します。

これはfirefoxでのみ発生し、解決策が思いつきません。(注: サーバー側ではなくクライアント側で実行したい API 呼び出しの結果であるため、javascript で画像を追加する必要があります)

壊れた 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 フィドル作業: 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>
4

1 に答える 1

2

に追加display:blockすると、a.video_link正しく動作するはずです：

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

于 2013-08-30T13:30:15.783 に答える