2010-12-16 120 views
0

以下是情況:兩個絕對定位的圖層,相同的位置和尺寸。頂層包含一個跨越整個圖層的Flash影片,嵌入到wmode="transparent"底層包含大部分可見的HTML鏈接。Flash wmode透明 - 點擊後面

在一個奇怪的週轉事件中,IE7和IE8按預期渲染頁面:Flash電影是可見的並且是鼠標交互式的;並且電影下面的鏈接部分可見並且鼠標交互。在FF3.6和Chrome 8中,鏈接可見但不可點擊。

http://www.powers1.net/flash-test/test2.html

代碼

<html> 
<head> 
<title>test</title> 
</head> 
<body bgcolor="#eeeeee"> 
    <div style="position: absolute; top: 0px; left: 0px; z-index: 1; width: 550px; height: 400px; overflow: hidden"> 
     <p><a href="http://www.google.com">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</a></p> 
    </div> 
    <div style="position: absolute; top: 0px; left: 0px; z-index: 2"> 
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="test" align="middle"> 
    <param name="allowScriptAccess" value="sameDomain" /> 
    <param name="allowFullScreen" value="false" /> 
    <param name="movie" value="test.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /> 
    <embed src="test.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="550" height="400" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
    </object> 
    </div> 
</body> 
</html> 

問題

我怎樣才能得到FF,Chrome和其他瀏覽器來模擬這是havior?

回答

2

wmode = transparent和wmode = opaque是邪惡的。原因如下:

•它在不同瀏覽器之間的互操作性問題,涉及到如何使用內容呈現它。正如你所觀察到的,有時候這個階段會允許點擊流血,有時候不會......有時當你試圖通過flash來對html內容進行分層時,你會在閃光燈中閃爍......等等。

•它殺死了閃存的性能,並拖拽用戶機器(導致CPU使用率高峯)..這主要是由於Flash播放器被迫通過瀏覽器而不是直接向GPU發送渲染指示......並且在隱藏視野時無法智能地降低其FPS。

•隨機出現在Flash中出現的隨機,神知 - 它們出現的錯誤,只要您將wmode翻到其中一個可怕的選項中;我已經看到第一手文字呈現錯誤,形狀繪製錯誤,以及一旦刪除wmode參數就會奇蹟般地消失的externalInterface錯誤,或將其切換到其他友好值之一。

你有沒有考慮過創建一個混合?一種類型的解決方案,你有幾個瑞士法郎電影 - 他們的X/Y在由HTML控制的瀏覽器窗口?我想你仍然必須使用wmode = transparent將它覆蓋在頁面的其餘部分,但是至少你可以始終獲得點擊以下內容的能力......

+0

結束重新實現沒有Flash的想法 - 而是使用HTML,CSS和透明PNG。 – leepowers 2010-12-18 23:02:47