Question

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

.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'，因为我的光标图像位于Images文件夹中，该文件夹位于我的Web项目的根目录下。为了让它在所有浏览器中都有效，我是否缺少一些东西？

Answer 1

我明白了。我的错误是，为了从.cur文件创建我的.png文件，我只是在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 */
}

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

您必须在自定义光标后添加默认的“内置”光标，否则自定义光标将无法在Firefox中加载。将其视为Mozilla实施良好网络实践的方式。

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

1 个答案: