在下面的示例中,当您将鼠标悬停在图标上时,光标应更改为其他。除IE 8以外,其他所有其他图标都无法使用。IE8上这些图标变得难以置信,即,不仅光标没有更改,而且Jquery click事件也不会触发。考虑以下html代码如何在FF,IE7以及最终在IE8上工作:

<!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>

问题的根源是什么?可能会有什么工作环境?
提前致谢。

P.S.更改DOCTYPE确实是不可能的。
另外,如果我删除了float:在此示例中保留为“fixed”,但是当我在网站上删除它时,除了破损的设计外,它也无济于事。

最佳答案

IE8不喜欢空的div。在div内放置带有透明像素的空白<img/>似乎可以解决此问题。

演示: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>

09-25 22:31
查看更多