Question

我正在尝试嵌入一个YouTube视频，但要让它看起来像电视的图像。它看起来我希望它在IE中的方式，但在Firefox和谷歌Chrome，它没有。

#youtubeBG img {
    display:block;
    text-align:center;
    width:100%;
    margin:0 auto;
    position:relative;

}
<div id="youtubeBG" style="width:1000px; height:700px; text-align:center;"><img       src="images/4.png"/>
<span class='embed-youtube' style='text-align: left; display: block; position: absolute; top: 305px; left: 382px; width: 786px; height: 514px;'>    <iframe class='youtube-player' type='text/html' width='750' height='528.3' src='' frameborder='0'></iframe>
</span></div>

Answer 1

你正在添加许多不必要的风格来实现你想要的。通常宽度：100％不是一个好主意，因为每个浏览器似乎都在计算并以自己的方式呈现它。

以下是我的建议：http://fiddle.jshell.net/iGanja/PJwD2/

您会注意到我添加了视觉参考边框，因为我没有您的图像。你基本上想要调整-20px以匹配你的背景图像。

希望这有帮助。

#youtubeBG img {
    display:block;
    margin:0 auto;
}

<div id="youtubeBG" style="border: 1px solid black; width:1000px; height:550px; text-align:center;">
    <img src="images/4.png"/>
    <div class='embed-youtube' style='border: 1px solid red; width: 786px; height: 514px; margin:-20px auto;'>
        <iframe class='youtube-player' type='text/html' width='750' height='528.3' src='' frameborder='0'></iframe>
    </div>
</div>

Img IE和Firefox之间的位置差异，Google Chrome等

1 个答案: