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

Question

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

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

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

.. in IE, for style sheets, the base URI is that of the source element, not that of the style sheet. Totally opposite to W3C specifications, but, yeah … that’s MSIE.

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

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

因此，从技术上讲，IE 和其他浏览器的正确 URI 应该是 '../Images/zoom.cur'，因为我的光标图像位于 Images 文件夹中，该文件夹位于我网站的根目录下项目。为了让它在所有浏览器中工作，我是否缺少某些东西？

Answer 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 说得很好：

You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices.

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

Custom cursor not working in IE8

css

asp.net

internet-explorer

cross-browser

cursor