工具提示無法在IE10上工作

我想在部分圖像上顯示工具提示。我有這種技術，它將絕對定位的圖像放在圖像上。工具提示無法在IE10上工作

<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title> 
<meta http-equiv="X-UA-Compatible" content="IE=10" > 
</head> 

<body> 

    <div style="position:relative;"> 
     <img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/> 
     <div title="HELLO" style="position:absolute; width:100px; height:100px; top:0; left:0;"></div> 
    </div> 

</body> 

</html>

但是當我將鼠標懸停在上面時，工具提示不顯示。

有誰知道錯在哪裏？此相同的代碼適用於Chrome 59

感謝

來源

2017-07-07 omega

這很有趣;當我將源代碼粘貼到HTML文件中時，它的行爲就像你說的那樣，但是當我將它放出來的時候，它確實工作正常！你可能想看看。 –

我想這是由於IE特定的功能，空元素是完全透明的，就像有'pointer-events：none'設置。爲圖像上的div設置背景顏色和「不透明度：0」應該可以做到這一點。 jsFiddle可能使用了一些CSS規範化器，這可能會改變IE中透明元素的行爲。 – Teemu

這段代碼似乎是確定在資源管理器中，Chrome瀏覽器，Firefox和邊緣。 img標籤在資源管理器中具有不同的div標籤行爲。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Title of the document</title> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=10"> 
 
    </head> 
 
    <body> 
 
     <div style="position:relative;"> 
 
      <img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/> 
 
      <img style="position:absolute; width:100px; height:100px; top:0; left:0; border-width: 0px;" src="javascript:void(0)" title="Test" alt=""> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-11-15 09:23:15

工具提示無法在IE10上工作

回答

相關問題