CSS 自定义光标图像在所有 IE 中都不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7419314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom cursor image doesn't work in all IEs?
提问by jilseego
I think I have tried different methods suggested all over the internet but nothing worked. This is my current css code:
我想我已经尝试过互联网上建议的不同方法，但没有任何效果。这是我当前的 css 代码：
div {
cursor: url(images/zoomin.cur), auto;
}
It works fine except in IE...
它工作正常，除了在 IE 中...
回答by Jason Gennaro
Unfortunately, cursoris plain buggy in IE, at least until and including 8
不幸的是，cursor在 IE 中是有问题的，至少直到并包括 8
In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.
在 Windows 版本 8 及以下的 Internet Explorer 中，如果在外部样式表文件中指定了相对 URI 值，则基本 URI 被视为包含该元素的文档的 URI，而不是其中包含该元素的样式表的 URI。声明出现。
http://reference.sitepoint.com/css/cursor
http://reference.sitepoint.com/css/cursor
You may want be able to use a conditional commentto target IE and then feed it a modified style rule with a different url.
您可能希望能够使用 aconditional comment来定位 IE，然后使用不同的url.
回答by Riccardo Volpe
I solved in this way for the grab cursorin Internet Explorer, citing the @JasonGennaro's answer:
我以这种方式解决了Internet Explorer 中的抓取光标，引用了@JasonGennaro的回答：
In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.
在 Windows 版本 8 及以下的 Internet Explorer 中，如果在外部样式表文件中指定了相对 URI 值，则基本 URI 被视为包含该元素的文档的 URI，而不是其中包含该元素的样式表的 URI。声明出现。
.grab_cursor {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 8 and below */
*cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
_cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}
Files tree:
文件树：
index.html
css/style.css -> here the posted code
img/cursors/openhand.cur
Good references:
很好的参考：
Working Demo:
工作演示：
回答by Elyasaf
From msdn documentation:
从 msdn 文档：
url(uri)
Internet Explorer 6 and later. Cursor is defined by the author, using a custom URI, such as url('mycursor.cur'). Cursors of type .CUR and .ANI are the only supported cursor types.
url(uri)
Internet Explorer 6 及更高版本。Cursor 由作者定义，使用自定义 URI，例如 url('mycursor.cur')。.CUR 和.ANI 类型的游标是唯一受支持的游标类型。
回答by willwong
Because different browsers treat relative URI's differently, the cursor style allows a list of urls. You can have one path that works for IE and one that works for other browsers:
因为不同的浏览器对相对 URI 的处理不同，所以光标样式允许一个 url 列表。您可以拥有一种适用于 IE 的路径和一种适用于其他浏览器的路径：
div {
cursor: url('app/images/zoomin.cur'), url('zoomin.cur'), auto;
}
In my setup, the first url works for IE11 (and earlier) because the script that uses the cursor is in 'cgi-bin/app' while the .cur and .css files are in 'app/images'. IE uses the document location as the base, so I need to add more path information to locate the cursor file. The second url works in Firefox because .cur and .css are in the same location and Firefox uses the .css location as the base, so additional path info is not needed.
在我的设置中，第一个 url 适用于 IE11（及更早版本），因为使用光标的脚本位于“cgi-bin/app”中，而 .cur 和 .css 文件位于“app/images”中。IE以文档位置为基础，所以我需要添加更多的路径信息来定位光标文件。第二个 url 在 Firefox 中有效，因为 .cur 和 .css 位于同一位置，并且 Firefox 使用 .css 位置作为基础，因此不需要额外的路径信息。
回答by VdesmedT
from : http://www.w3schools.com/cssref/pr_class_cursor.asp
来自：http: //www.w3schools.com/cssref/pr_class_cursor.asp
The cursor property is supported in all major browsers.
Note: Opera 9.3 and Safari 3 do not support URL values.
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
所有主要浏览器都支持光标属性。
注意：Opera 9.3 和 Safari 3 不支持 URL 值。
注意：IE7 及更早版本不支持值“inherit”。IE8 需要一个 !DOCTYPE。IE9 支持“继承”。
回答by Adam Pery
To work in IE you need specify full path to CUR file. E.g.:
要在 IE 中工作，您需要指定 CUR 文件的完整路径。例如：
html {
cursor: url("../img/cursor.png"), url("http://www.example.com/dist/assets/img/cursor.cur"), default;
}
回答by Tbars84
this one work for me proved in IE10, INDEXED in the of index.html( you must use absolute routes)
这一项对我来说在 IE10 中得到了证明，在 index.html 中有 INDEXED（你必须使用绝对路由）
<style type="text/css">
.container{
cursor: url(http://path/of/folder/image.cur), default !important;
}
</style>
回答by Alex
I tried using .ani and .gif and it is working. It should go like this:
我尝试使用 .ani 和 .gif 并且它正在工作。它应该是这样的：
body {
cursor: url(images/dog.ani), url(images/dog.gif), progress !important;
}
This css works for my website in chrome, firefox and IE.
这个 css 适用于我在 chrome、firefox 和 IE 中的网站。
