Data URI doesn't work with IE10

StackOverflow https://stackoverflow.com//questions/25035074

Question 

<body class="cursor-success" >
    <div>
         <a><img src="/myImage.jpeg"></a>
    </div>
</body>

.cursor-success {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAYAAAAVibZIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAONJREFUeNrUlLESwiAMhgPmrmM7+JI6dHfxMexLdrCbQ0/8wXq2HBwJ6uDP5SjQfoQmxDrnKDbIpealZikjY4yjSmWhdKgHc3bl8vYYMt+BfgDm4hsVYBZtrQSz+EcpwKwKqxDM6nwRgLkquwtgqwYePQ025G9e2dN7tPUQCoOpu6ZePWwHbK+8vrkqhY9d6P1pGP26NWG+UVep1zFhM82AnLfeQje1p9F4j7b1djmJ2NM4EBiPNOLhtMqAZ/S7ZC1ePCkKwWmppStN6Y2rkh+QCWCSFBRV8ktLn6Uf6H+gDwEGAIkg8mOa3vMCAAAAAElFTkSuQmCC') /*/Content/images/cursor-success.png*/, auto !important;
}

Internet explorer 10 doesn't use the cursor.

Was it helpful?

Solution

Positioning syntax for url() values not supported in Internet Explorer:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Browser_compatibility

For Internet Explorer, GIF (or other image type) not work. Microsoft Windows Cursor (.cur) or Microsoft Windows Animated Cursor (.ani) file is required.

Reference: http://www.iandevlin.com/blog/2010/03/webdev/getting-a-customised-css-cursor-to-work-in-firefox-and-internet-explorer

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top