IE 8 div和css光標

在示例下圖中，當您將鼠標懸停在圖標上時，光標應該更改爲不同。它的工作原理除IE 8之外。在IE 8上，這些圖標變爲不可粘貼，即不僅遊標不會更改，而且jquery點擊事件也不會觸發。考慮下面的HTML代碼是如何工作的FF，IE7，最終在IE8：IE 8 div和css光標

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>CSS IE 8 cursor test</title> 
    <style type="text/css" media="screen"> 
     .icon-button { 
      float: left; 
      cursor: pointer; 
     } 
     .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); } 
</style> 
</head> 
<body> 
    <div class="icon-button ui-icon"></div> 
    <div>Sample Text</div> 
</body> 
</html>

什麼migth是問題的根源？什麼可能是可行的workarrounds？
在此先感謝。

P.S.改變DOCTYPE並不是真的可行。
另外，如果我刪除浮動：在這個例子上左邊它看起來像「固定」，但當我在網站上刪除它，除了破碎的設計，它也沒有幫助。

來源

2009-10-04 Andriy Tkach

這工作太：'光標：指針重要;'爲IE8 – 2013-08-15 20:47:16

IE8不喜歡空div s。將一個空白的<img/>與一個透明的像素在div裏面似乎可以解決它。

演示：http://jsbin.com/asiju（編輯通過http://jsbin.com/asiju/edit）

HTML源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>CSS IE 8 cursor test</title> 
    <style type="text/css" media="screen"> 
     .icon-button { float: left; cursor: pointer; } 
     .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); } 
     .dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; } 
    </style> 
    </head> 
    <body> 
    <div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div> 
    <div>Sample Text</div> 
    </body> 
</html>

來源

2009-10-04 11:53:10 brianpeiris

太棒了！我已經應用了它，似乎是固定的。但你有沒有注意到IMG的邊框在IE8上並沒有消失？ – 2009-10-04 13:37:38

你說得對。我編輯了我的答案，在圖像標籤中包含1x1透明像素。這擺脫了邊界：http://jsbin.com/asiju – brianpeiris 2009-10-04 14:39:58

呃，多麼討厭的黑客。不會溢出：汽車做詭計？ – 2009-12-09 16:00:39

我不知道任何破解它。但是，如果smth可以被點擊，它應該在a標記中，因此插入a或者display:block。 href可能是=#。該解決方案似乎是語義和對我有好處:)

來源

2009-10-04 11:30:38 IProblemFactory

謝謝你，但是不，我只是試圖替代的div在我的例子中： - 它沒有幫助... – 2009-10-04 11:41:27

我的意思是，將'a'插入'div'，默認'a'光標是指針:) – IProblemFactory 2009-10-04 11:45:20

我同意Rinz。像堆棧溢出一樣，或者至少使用一個帶有背景圖像的按鈕（''），最好使用帶圖像的鏈接（''）。它更加語義化。 – brianpeiris 2009-10-04 12:12:11

如何：

<a href="whatever.php"> 
<div class="BG IMAGE" style="cursor:The one you want"></div> 
</a>

我用它自己，它工作正常。

來源

2009-12-09 15:41:49 Nothing

你不能把一個div裏面的一個 – 2009-12-09 16:03:22

是的。同意一個時間 - 這是不好的語義。 – 2009-12-10 12:13:04

拿出float:left和CSS類如下所示。

.icon-button { cursor: pointer; }

它應該工作。

來源

2012-03-10 07:48:15 Sridhar

這只是在IE8的工作對我來說，超級簡單

cursor: pointer !important;

來源

2013-08-15 20:48:15

這對我來說非常合適。謝謝！ – Khagan 2014-11-04 03:11:27

IE 8 div和css光標

回答

相關問題