web-dev-qa-db-ja.com

カスタムカーソル画像はすべてのIEで機能するとは限りませんか？

私はインターネット全体で提案されたさまざまな方法を試したと思いますが、何もうまくいきませんでした。これは私の現在のCSSコードです：

div {
   cursor: url(images/zoomin.cur), auto;
}

IE以外では問題なく動作します...

cssinternet-explorercursor
12
jilseego

残念ながら、cursorは、少なくとも8までは、IEでは明らかにバグがあります。

バージョン8までのInternetExplorer for Windowsでは、相対URI値が外部スタイルシートファイルで指定されている場合、ベースURIは、要素を含むドキュメントのURIであり、スタイルシートのURIではないと見なされます。宣言が表示されます。

http://reference.sitepoint.com/css/cursor

conditional commentを使用してIEをターゲットにし、変更されたスタイルルールに別のurlをフィードできるようにすることができます。

16
Jason Gennaro

私はこの方法でInternetExplorerのグラブカーソルを解決し、 @ JasonGennaro の答えを引用しました。

バージョン8までのInternetExplorer for Windowsでは、相対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\9; /* 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 */
}

ファイルツリー：

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

良い参考文献：

作業デモ：

5
Riccardo Volpe

ブラウザが異なれば相対URIの扱いも異なるため、カーソルスタイルではURLのリストを使用できます。 IEで機能するパスと、他のブラウザーで機能するパスを1つ持つことができます。

div {
   cursor: url('app/images/zoomin.cur'), url('zoomin.cur'), auto;
}

私のセットアップでは、カーソルを使用するスクリプトが「cgi-bin/app」にあり、.curファイルと.cssファイルが「app/images」にあるため、最初のURLはIE11（およびそれ以前）で機能します。 IEはドキュメントの場所をベースとして使用するため、カーソルファイルを見つけるためにパス情報を追加する必要があります。2番目のURLは、.curと.cssが同じ場所にあり、 Firefoxは.cssの場所をベースとして使用するため、追加のパス情報は必要ありません。

2
willwong

Msdnのドキュメントから：url（uri）Internet Explorer6以降。カーソルは、url（ 'mycursor.cur'）などのカスタムURIを使用して、作成者によって定義されます。 タイプ.CURおよび.ANIのカーソルのみがサポートされているカーソルタイプです。

1
Elyasaf

私にとってこれはIE10で証明されたもので、index.htmlのINDEXEDです（絶対ルートを使用する必要があります）

<style type="text/css">
    .container{
    cursor: url(http://path/of/folder/image.cur), default !important;
        }
</style>
0
Tbars84

IEで作業するには、CURファイルへのフルパスを指定する必要があります。例：

html {
    cursor: url("../img/cursor.png"), url("http://www.example.com/dist/assets/img/cursor.cur"), default;
}
0
Adam Pery

から： http://www.w3schools.com/cssref/pr_class_cursor.asp

カーソルプロパティは、すべての主要なブラウザでサポートされています。

注：Opera 9.3およびSafari3はURL値をサポートしていません。

注：値 "inherit"は、IE7以前ではサポートされていません。 IE8には！DOCTYPEが必要です。 IE9は「継承」をサポートしています。

0
VdesmedT