代码之家 › 专栏 › 技术社区 › Darko

如何消除<embed>元素周围的空白?

quicktime embed css html

Darko · 技术社区 · 15 年前

摘要:具有100%宽度和高度的嵌入将其父级大小推到祖父母的100%宽度和高度。如何让嵌入元素折叠它周围的所有空白区域,使其完全适合其父元素的宽度和高度?

我有一个带有图像的页面,点击后会被播放QuickTime电影的嵌入元素替换。

问题是嵌入式电影周围有大量的空白。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title></head>
    <body>
        <div style="border:1px solid #000;">
        <embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
        </div>
    </body>
</html>

视频的大小未知,所以如何在保持高度和宽度为100%的情况下消除这些空白?

编辑:虽然没有显示,但实际上我正在清除填充和边距。空白仍然存在。

编辑2:有问题的空白在电影和黑边框之间,而不是黑边框和浏览器之间。

7 回复 | 直到 13 年前

thedz 15 年前

是否清除默认的浏览器边距和填充?否则,您需要这样做。

大多数人使用CSS重置样式来规范浏览器之间的边距和填充。一个很好的用法是Eric Meyer的: CSS Reset

编辑:要删除嵌入项下的空间,请在嵌入项上设置display:block。见: http://media.nodnod.net/embed.html

VVWdefect 13 年前

伍霍,
我找了很长时间才找到这个答案,终于找到了!
您必须将嵌入元素放在iframe或frame中的对象元素中:
iFrAMP页面

<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>

iframe源

<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>

确保iframe、object和embed元素中的height和width值相同。

jeroen 15 年前

我不熟悉嵌入元素,但在我看来,当您将宽度设置为100%时,您将其设置为父元素的宽度,在本例中,父元素是一个DIV,DIV占据整个可用宽度,因为它是一个块元素。

因此,您可以浮动周围的DIV,或者直接显示它,使其大小适应内容而不是周围的可用空间。

DLS 15 年前

尝试设置float:就像这样留在DIV和嵌入元素上。这将消除多余的空白。

<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
   <embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>

Randolpho 15 年前

隐马尔可夫模型。。。

这是一个丑陋的黑客,但你可以使用一张桌子:

<table width="100%" height="100%">
  <tr>
    <td align="center" valign="middle"><embed /></td>
  </tr>
</table>

tsilb 15 年前

您是否使用了DOM检查器来验证空白不是嵌入的一部分?

此外,您还可以将它放在一个面板/div/etc中,并与CSS混淆:

position: relative; top: -10px; left: -10px; overflow: hidden;

Darko 15 年前

事实证明,除了使用 scale="aspect" .

虽然不是完美的解决方案,但现在必须这样做。