HTML中object標籤在Firefox會出現底下margin-bottom: 2px現象的解決方法

6月 30, 2009 DSpace 2 Comments Edit Copy Download

上圖的圖片是一個<object>標籤，外面包著一層<div>用以表示圖片與其他元素的位置，但是會發現到底下多出了大約2px的間隔，除了原本在<object>裡面設定的height之外，還被強迫下向擠了一些間隔。

這是Firefox才會出現的錯誤，修正方法是在<object>的style屬性當中加入font-size: 0 (字體大小為0)、line-height: 0 (行高為0) 即可，程式碼如下：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
	width="640"
	height="380"
	style="font-size: 0;line-height: 0;"
	codebase="http://active.macromedia.com/flash5/cabs/swflash.cab#version=4,0,0,0">
		<param name="movie" value="http://140.119.61.174:8080/jspui/retrieve/1366">
		<param name="play" value="true">
		<param name="loop" value="true">
		<param name="quality" value="high">
		<param name="wmode" value="transparent">

		<embed src="http://140.119.61.174:8080/jspui/retrieve/1366" width="640" height="380" style="font-size: 0;line-height: 0;" 
			play="true" align="" loop="true" quality="high"
			type="application/x-shockwave-flash"
			wmode="transparent"
			pluginspage="http://www.macromedia.com/go/getflashplayer">
		</embed>
	</object>

修正結果之後的畫面如下，下面的間隔不見了。