[CSS]網頁鑲入FLASH卻出現邊框或白線之解決辦法

2013-07-30

9345
0
CSS
2013-10-20

雖然HTML5越來越火紅，但要所有網頁設計師都去學HTML5捨棄掉FLASH簡直是天方夜譚，所以在實務上，常常會從網頁設計師的版發現又是FLASH，又是Table排版，搞半天還是要程式設計師花時間去調整版面(以上純屬個人經歷小小抱怨…)

之前常發現一個問題，就是FLASH邊邊會出現白線，網頁結構大概如下：

<body>
<form id="form1" runat="server">
    <div>
        <object id="FlashID" width="900" height="675" style="visibility: inherit;">
            <param name="movie" value="flash.swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <param name="swfversion" value="11.0.0.0">
            <!-- 此 param 標籤會提示使用 Flash Player 6.0 r65 和更新版本的使用者下載最新版本的 Flash Player。如果您不想讓使用者看到這項提示，請將其刪除。 -->
            <param name="expressinstall" value="../../Content/images/expressInstall.swf">
            <param name="BGCOLOR" value="#2b0001">
            <!-- 下一個物件標籤僅供非 IE 瀏覽器使用。因此，請使用 IECC 將其自 IE 隱藏。 -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="flash.swf" width="900" height="675" style="font-size: 0; line-height: 0;">
                <!--<![endif]-->
                <param name="quality" value="high">
                <param name="wmode" value="transparent">
                <param name="swfversion" value="11.0.0.0">
                <param name="expressinstall" value="../../Content/images/expressInstall.swf">
                <param name="BGCOLOR" value="#2b0001">
                <!-- 瀏覽器會為使用 Flash Player 6.0 和更早版本的使用者顯示下列替代內容。 -->
                <div>
                    <h4>這個頁面上的內容需要較新版本的 Adobe Flash Player。</h4>
                    <p>
                        <a href="http://www.adobe.com/go/getflashplayer">
                            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="取得 Adobe Flash Player" width="112" height="33"></a>
                    </p>
                </div>
                <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
    </div>
    <div style="background-color: yellow;">test</div>
</form>
</body>

第二個div我用背景黃色來區隔，會發現有以下白線(紅色區塊為FLASH區塊，因版權問題故就不呈現了)：

調了好久，解決方法其實很簡單，只要朝CSS下手即可Q__Q：

object {
     float:none;
     margin:0em 0em 0em 0em;
     display:block;
}

Referenece

CSS Display屬性介紹

回首頁