Flash 对象后不需要的垂直空间答案

【问题标题】：Unwanted vertical space after Flash objectFlash 对象后不需要的垂直空间
【发布时间】：2010-12-16 02:38:45
【问题描述】：

请看下面的代码：

<div>Lorem ipsum dolor sit amet</div>  
    <object  
        type="application/x-shockwave-flash"  
        data="banner.swf"  
        width="965"  
        height="120"  
    ></object>  
<div>Consectetur adipiscing elit</div>

在 Gecko、Webkit 或 Presto 中查看它时，会在 object 之后、第二个 div 之前出现一个无意的垂直空间（参见 http://jooadam.hu/object）。从标签之间删除空格，或显式设置边距和填充都没有帮助。

任何帮助将不胜感激。

【问题讨论】：

标签： html css flash object whitespace

【解决方案1】：

与此同时，有人在另一个论坛上回答了我的问题。像图像这样的对象是内联块元素；在object 上设置display: block 可以解决问题。

【讨论】：

【解决方案2】：

<div>Lorem ipsum dolor sit amet</div>
<object width="965" height="120">
    <embed src="banner.swf" type="application/x-shockwave-flash" width="965" height="120"></embed>

Lorem ipsum dolor sit amet

【讨论】：

但要真正在页面上添加 Flash，您应该使用 code.google.com/p/swfobject
嵌入是专有元素，因此不属于 HTML 规范。

【解决方案3】：

这个问题真的让我很好奇，除了我会使用不同的方法（例如使用 SWF 对象）之外，空格似乎是凭空出现的。

我在 firebug 上摆弄了一下，找到了一种通过调整样式来修复它的方法：

#container { line-height: 0;}
#header, #footer { line-height: 1em;}

但是我怀疑如果你在对象标签周围添加一个它应该会自行修复。

【讨论】：

如果你在对象标签周围添加了什么？

【解决方案4】：

<object width="965" height="120" align ="middle">

将对象居中对齐。然后对象占位符将与图像或 Flash 内容重叠。

【讨论】：