●Macのsafariのあるリンクボタンだけ、カーソルを乗せても矢印に

質問

●Macのsafariのあるリンクボタンだけ、カーソルを乗せても矢印にならず、リンク先に飛ぶことができません。
ちょっと仕事のサイトなので全て公開する訳にはいかないのですが、ソースとしては、ごく普通の
<ul>
<li class="kaisya"><a href="kaisha.html">会社概要/求人</a></li>
<li class="cebu"><a href="●●●">●●店</a></li>
<li class="saipan"><a href="index.html">●●店</a></li>
</ul>
で、他の部分で上記と全く同じようにコーディングしている部分はちゃんとマウスカーソルを合わせると矢印になり、リンク先にも飛ぶんです。
MacOS10.6.2でsafari5ですが、発注先の方のMacのsafari（バーションは知りません）でも同じ現象が起こっているようです。
検索してみたのですが、わたしと全く同じケースはありませんでした。どなたか原因の解る方いらっしゃいますか？

回答No.3

yyr446 · ベストアンサー

text-align:center を外して試せませんか、

text-align:centerとtext-indent:-9999px
って矛盾じゃないですけど、位置をどこに合わせようとするんでしょうかね

お礼

すみません。z-indexの問題だったんです。自己解決した場合どこに書いたらよいのかわかず、そのままになってしまいました。背景画像とリンクボタンが重なり合っていて、それでz-indexを使ったら解決致しました。でも、親要素がtext-align:centerなのもたしかにおかしいですね。直しておきます。ありがとうございました。

回答No.2

yyr446

関係無いかもしれないけど、

background:url(../images/kaisya_menu.jpg);
text-indent:-9999px;

を使ったテキストの画像置換を行う時、
そこに text-align:　が親から継承されていると
うまくいかないケースがあるとの事です。

補足

ちょっと初めて聞いたケースなのでよくわからないのですが、
親のtext-alignはcenterになっていました。何か関係あると思われますか？

回答No.1

yyr446

「マウスカーソルを合わせると矢印になり、リンク先にも飛ぶ」
というのは、何らかの仕掛け（CSS or Javascript）が施されているはず。
その仕掛けの対象とするための、処置はこれを見ただけではわかりません。

Macの特定のバージョンのsafariに固有の問題なのかどうか、切り分けましたか？
（もしかして、他のＰＣのＩＥとかで試しても、同じ現象になりませんか）

お礼

すみません。補足です。
調べ直してみたら、Win,Mac共にgooglechromeとsafariで反応しません。やはり他のリンクの部分には問題ありません。どうしてでしょうか？

補足

Macのsafariのバージョンだけです。MacのIEは対象に入れていないのでわかりませんが、他のPCとブラウザではリンク先に飛びます。cssを記述しますね。
.kaisya {
background:url(../images/kaisya_menu.jpg);
width:150px;
height:39px;
text-indent:-9999px;
display:inline;
}
.kaisya a {
float:right;
width:150px;
height:39px;
background:url(../images/kaisya_menu.jpg);
text-indent:-9999px;
display:block;
}
.cebu {
background:url(../images/cebu_menu.jpg);
width:150px;
height:39px;
text-indent:-9999px;
display:inline;
}
.cebu a {
float:right;
width:150px;
height:39px;
background:url(../images/cebu_menu.jpg);
text-indent:-9999px;
display:block;
}
.saipan {
background:url(../images/saipan_menu.jpg);
width:150px;
height:39px;
text-indent:-9999px;
display:inline;
}
.saipan a {
float:right;
width:150px;
height:39px;
background:url(../images/saipan_menu.jpg);
text-indent:-9999px;
display:block;
}