在下面的示例中，当您将鼠标悬停在图标上时，光标应该更改为不同的。它适用于 IE 8。在 IE 8 上，这些图标变得不可点击，即不仅光标没有改变，而且 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>
问题的根源可能是什么？可能的解决方法是什么？
提前致谢。
附言更改 DOCTYPE 是不可能的。
此外，如果我在这个示例中删除 float: left 它似乎是“固定的”，但是当我在网站上删除它时，除了损坏的设计之外，它也无济于事。
最佳答案
IE8 不喜欢空 div秒。放空白 <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>
关于html - IE 8 div 和 css 游标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1516190/