问题
I have a custom cursor working on Chrome and Firefox by using the CSS property, cursor. However, on Microsoft Edge, the cursor seems to have an offset. I have to aim above my custom cursor a bit in order to select items accurately.
Is there something I can do to fix this? Or is this some sort of limitation?
Edit: I should mention that I'm using a custom image as my cursor.
回答1:
In both IE and Edge only .cur files are supported, see https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx. (Edge supports other formats but not the interaction point definition as you mentioned in your comment to Martin Beeby's answer, rendering those pretty useless.) The .cur file allows you to define the interaction point. Just google for ".cur editor" and choose the editor that suits you to create a .cur file.
Since other browsers do support the definition for the interaction point, but not the .cur format, you must define two cursor properties in your css, the first with the .cur file and the second with a .png or other format and the interaction point definition. IE and Edge will ignore the second and for other browsers the .cur file will be overwritten, that way it'll work cross-browser.
div {
cursor: url(path/to/cursor.cur), auto; /*IE and Edge*/
cursor: url(path/to/cursor.png) 4 12, auto; /*Chrome, FF, etc.*/
}
One side note, be sure to read this (http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/) article. It's about a relative path bug in IE 6 & 7, but the bug is still around in IE 11. The bug seems resolved in Edge though (at least when I tried recently). So you need to fiddle a bit with the path to the .cur file to get it working on both IE and Edge. See the workarounds mentioned in the article.
回答2:
In CSS you can pass in coordinates which specify the interaction point.
Perhaps adding these will help solve your issue?
/* Using URL and coordinates */
cursor: url(cursor1.png) 4 12, auto;
来源：https://stackoverflow.com/questions/34697078/custom-cursor-on-microsoft-edge-has-an-offset