:::

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

6月 30, 2009 2 Comments Edit Post

image

上圖的圖片是一個<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>

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

image

總共2 則留言, (我要發問)

  1. 網路上有一些reset的css可以用,像YUI會把不同瀏覽器的預設行為都改為0

    回覆刪除
  2. 備份一下
    YUI -- The Yahoo! User Interface Library
    http://developer.yahoo.com/yui/

    Wiki介紹
    http://zh.wikipedia.org/w/index.php?title=Yahoo!_UI_Library&variant=zh-tw

    網誌評論
    http://www.cc.ntu.edu.tw/chinese/epaper/20070620_1010.htm

    謝啦

    回覆刪除

留言工具: