And*_*ach 5 html css internet-explorer internet-explorer-8
在示例下,当您将鼠标悬停在图标上时,光标应更改为不同.它的工作原理除了IE 8.在IE 8上,这些图标变得不可用,即不仅光标不会改变,而且Jquery点击事件也不会触发.考虑以下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>
什么是迁移是问题的根源？什么可能是workarrounds？
提前致谢.
PS改变DOCTYPE是不可能的.
此外,如果我删除 浮动:左边这个例子它似乎"固定",但当我在网站上删除它,除了破碎的设计,它也没有帮助.
IE8 不喜欢空divs。<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>