視頻反應點擊覆蓋<a>元素（IE10）

仍然使用IE10的客戶（並且，不幸的是，升級似乎不是一種選擇）已經報告了我們設置的一段HTML的問題。視頻反應點擊覆蓋<a>元素（IE10）

我們有一個視頻，通過Vimeo iframe嵌入，這個視頻覆蓋了一個鏈接，絕對定位，寬度100％，視頻頂部100％高度。當您點擊此鏈接時，無論您點擊的視頻位於何處，鏈接都會按照預期進行。

當您單擊IE10中的「鏈接」並且可能更低時，視頻會暫停並對其進行響應，並且不會遵循鏈接，除非您明確單擊鏈接文本。

粗糙代碼大綱如下：

<div> 
    <iframe width="100%" height="100%" src="VIMEO URL HERE"></iframe> 
    <a href="/link-here">link text</a> 
</div> 

div { 
    position: relative; 
} 

iframe { 
    position: absolute; 
    z-index: 1; 
} 

a { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 5; 
}

有沒有辦法在舊的瀏覽器來解決這一問題，以使鏈接真正覆蓋視頻和視頻，因此無法點擊反應？如果需要Javascript解決方案（這是相當老的一個，我們正在重建中），我們在網站上有jQuery 1.x

這裏是CodePen的鏈接，顯示了問題背後的代碼，但出色地，它不會在IE10中打開！ http://codepen.io/anon/pen/vxLEgQ

來源

2017-03-01 MikkyX

你要設置的錨標記爲'block'。 – Hewlett

剛剛檢查過CSS，它已經是了，對於在我的代碼片段中不包括這些，我表示歉意。它也得到了頂部：0和左：0 – MikkyX

順便說一句，你不必將iFrame設置爲絕對的，如果你只想讓錨點漂浮在它上面。 – Hewlett

所以，根據您的codepen創建了我自己的示例;現在我只能在IE 11中測試並模擬IE 10，在這裏沒有原生IE 10 - 但我認爲這也應該在「真實」中運行。

舊IE有時會出現問題妥善醒目的「透明」元素的點擊次數 - 但設置背景通常會解決，並通過rgba這樣的背景可以是透明的，以及（只使用transparent關鍵字似乎沒有工作，雖然。）

所以嘗試只需添加這爲您的鏈接，這應該使它在IE 10，以及正確點擊：

background: rgba(255,255,255,0);

來源

2017-03-01 11:17:58 CBroe

這是在我的IE10 Virtualbox中工作的。我會推動它的生活，看看它是否也適用於客戶端。謝謝！ – MikkyX

視頻反應點擊覆蓋<a>元素（IE10）

回答

相關問題