IE 8 div 和 css 光标答案

【问题标题】：IE 8 div and css cursorIE 8 div 和 css 光标
【发布时间】：2013-08-16 04:48:15
【问题描述】：

在下面的示例中，当您将鼠标悬停在图标上时，光标应更改为不同的。它适用于 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>

问题的根源是什么？可能的解决方法是什么？
提前致谢。

附：更改 DOCTYPE 是不可能的。
此外，如果我在此示例中删除 float: left，它看起来像是“已修复”，但是当我在网站上删除它时，除了损坏的设计之外，它也无济于事。

【问题讨论】：

这也可以：cursor: pointer !important; for ie8

标签： html css internet-explorer internet-explorer-8

【解决方案1】：

IE8 不喜欢空的divs。在 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>

【讨论】：

太棒了！我已经申请了，似乎已经解决了。但是你有没有注意到 IMG 的边框实际上并没有在 IE8 上消失？
你是对的。我编辑了我的答案，在图像标签中包含一个 1x1 透明像素。这摆脱了边界：jsbin.com/asiju

【解决方案2】：

我不知道有什么技巧可以打败它。但是，如果可以点击它，它应该在a 标签中，所以插入a 或者display:block。 href 可以是 =#。该解决方案似乎是语义化的，对我有好处:)

【讨论】：

谢谢，但不，我只是尝试在我的示例中将 div 替换为 a： - 它没有帮助......
我的意思是，插入a到div，默认a光标是指针:)
我同意林兹的观点。最好使用带有图像的链接 (<a><img/></a>)，就像 Stack Overflow 一样，或者至少使用带有背景图像的按钮 (<button></button>)。它更符合语义。

【解决方案3】：

怎么样：

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

我自己用过，效果很好。

【讨论】：

你不能把 div 放在 a 里面

【解决方案4】：

取出float:left，css类如下图。

.icon-button { cursor: pointer; }

它应该可以工作。

【讨论】：

【解决方案5】：

这在 IE8 中对我有用，超级简单

cursor: pointer !important;

【讨论】：