自定义光标在 IE8 中不起作用答案

【问题标题】：Custom cursor not working in IE8自定义光标在 IE8 中不起作用
【发布时间】：2015-09-01 17:40:13
【问题描述】：

我有几个img 标签（它们都是popover 类的一部分），我为用户提供了点击放大的可能性。为了让他们知道图像可以放大，我想将img 的光标更改为自定义光标（因为zoom-in 不是IE 中cursor 属性的可用值）：

.popover 
{
    cursor: url('../Images/zoom.cur'), default;
}

这在 Chrome 和 Firefox 中效果很好，但在 IE8 中却不行（我测试的 IE 版本，但我怀疑它在其他版本中效果不佳）。为了找到解决方案，我阅读了this article，其中指定了以下内容：

.. 在 IE 中，对于样式表，基础 URI 是源元素的基础 URI，而不是样式表的基础 URI。与 W3C 规范完全相反，但是，是的……那是 MSIE。

源元素是我的 ASP.NET 页面Index.aspx。这就是我的项目的结构（我只包含了引用的文件）：

Project.Web
├── Css
│   ├── style.css
├── Images
│   ├── zoom.cur
├── Print
│   ├── Index.aspx

因此，从技术上讲，IE 和其他浏览器的正确 URI 应该是 '../Images/zoom.cur'，因为我的光标图像位于我的 Web 项目根目录下的 Images 文件夹中。为了使其在所有浏览器中都能正常工作，我是否遗漏了什么？

【问题讨论】：

标签： css asp.net internet-explorer cross-browser cursor

【解决方案1】：

我想通了。我的错误是为了从.png 文件创建我的.cur 文件，我只是更改了Windows 资源管理器中的扩展名。然后，指定这个：

cursor: url('../Images/zoom.cur'), default;

适用于现代浏览器，但不适用于 IE。这不起作用的原因是它压缩了文件并且并非所有浏览器都可以读取压缩文件。所以我使用online tool 来正确转换我的文件。

注意，我建议您的 .png 文件在转换之前应为 32x32 大小，因为 IE9（对我来说也是 IE8）似乎会将小于此大小的光标调整为 32x32 .

现在，如果您保留上面的 CSS 行，它将适用于 IE，但不适用于现代浏览器。出于某种我不明白的原因，新的未压缩 .cur 文件不再适用于 Chrome 等现代浏览器。因此，我决定为现代浏览器使用原始的 .png 文件。我最后的 CSS 行是：

.popover 
{
    cursor: url('../Images/zoom.png'), /* Modern browsers            */
            url('../Images/zoom.cur'), /* Internet Explorer          */
            default;                   /* Older browsers and Firefox */
}

对于那些对为什么 Firefox 需要 default 值感到困惑的人，the article that helped me solve my problem 说得很好：

您必须在自定义光标之后添加一个默认的“内置”光标，否则自定义光标将不会在 Firefox 中加载。将其视为 Mozilla 执行良好网络实践的方式。

【讨论】：