IE 8 div和css光标

Question

IE 8 div和css光标

htmlcssinternet-explorerinternet-explorer-8

5

在下面的例子中，当你将鼠标悬停在图标上时，光标会改变。它在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 似乎可以“固定”，但在网站上删除它，除了破碎的设计外，也无济于事。

- Andriy Tkach

这也可以起作用：cursor: pointer !important; 适用于ie8。 - Leon Gaban

5个回答

1

把 float:left 去掉，css 类看起来像下面这样。

.icon-button { cursor: pointer; }

它应该可以运行。

- Sridhar

1

怎么样：

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

我自己使用它，它运行良好。

- Nothing

1

你不能在a标签内放置div元素。 - Stephan Muller

1

我不知道任何可以打败它的黑科技。但是，如果某些东西可以被点击，那么它应该在a标签中，因此插入a，可能还要加上display:block。 href可以是=#。这个解决方案对我来说似乎是语义化和好的 :)

- IProblemFactory

谢谢，但不行，我刚刚尝试将我的示例中的div替换为a： <a class="icon-button ui-icon" href="#"></a> - 没有帮助... - Andriy Tkach

我的意思是将 a 插入到 div 中，默认情况下，a 的光标是指针 :) - IProblemFactory

我同意Rinz的观点。最好使用带有图像的链接(<a><img/></a>)，就像Stack Overflow一样，或者至少使用带有背景图片的按钮(<button></button>)。这更符合语义学要求。 - brianpeiris

1

这在IE8中对我很有效，非常简单

cursor: pointer !important;

- Leon Gaban

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brianpeiris · Accepted Answer

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