css - Flash 对象/嵌入中断布局

Question

编辑:我最终求助于 td { max-width: 460px; } ，它解决了 IE 和 FF 中的直接问题。仍然对这种布局行为的原因感到好奇。

我正在处理使用两列表格布局的现有页面。在左边的一个单元格中，有一个普通的<object><param /><param /><embed /></object>。嵌入 Flash map 的代码片段 (http://backspace.com/mapapp/):

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="zoom_map"  style="display: block !important;" height="251" width="460">
    <param name="movie" value="/[path]/world.swf?data_file=/[path]/data.xml">
    <param name="quality" value="high">
    <param name="bgcolor" value="#FFFFFF">
    <embed src="/[path]/world.swf?data_file=/[path]/data.xml" quality="high" bgcolor="#FFFFFF" name="Clickable World Map" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" style="display: block !important;" title="Adobe Flash Player" align="top" height="251" width="460"> 
</object>

问题在于，在 IE 9 和 FF 21.0 中，即使在使用 Firebug 或 IE 的开发工具检查时，对象和嵌入似乎都恰好是预期的 460 像素宽，但表格列变得明显更宽。在FF中使用Firebug删除嵌入时， map 消失但布局没有改变。同时删除对象时，列会缩小到预期的宽度。

我在某处读到 display: block有时会解决这样的问题，但这已经存在并且似乎无济于事。在 Chrome 中一切正常，即 map 右侧没有额外的空间。

我试过在样式属性中设置宽度。我也试过将整个东西包装在一个宽度为 460px 和 overflow: hidden 的 div 中，但也无济于事。

我似乎运气不好用谷歌搜索这个问题，所以我希望有人能够提供帮助。提前致谢。

Answer 1

这只是我误解了使用默认 table-layout: auto 自动布局表格的一个例子。事实证明，如果我用相同宽度的 div 替换 flash 对象，对列宽的影响是完全一样的。

我的结论是，仅仅在左列中存在一个具有固定宽度的对象就会使布局引擎调整两列之间的平衡，即使它实际上并不需要这样做。由于右栏只包含没有指定宽度的段落和标题等，因此从该栏窃取一些宽度被认为是安全的。