在下面的示例中,当您将鼠标悬停在图标上时,光标应更改为其他。除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>