人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSの設定(a:link)でリンクのアンダーラインを点線にしているのですが、ネットスケープ,MacのIE等のブラウザではリンクを張った画像にも点線のアンダーラインがついてしまいます。これを回避する方法もしくは詳しいURLをを教えてください。.imgというクラスを作り.img a:link { text-decoration: none; border: none 0px }とし、画像に.imgクラスを指定しましたが解決しませんでした。(何か間違いがあるのかも..)

●質問者: HIDEBIRD
●カテゴリ:ウェブ制作
✍キーワード::link border CSS IE Mac
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● finalvent
●20ポイント

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

文字側をクラスで特定しては?

a.txt {

text-decoration: none;

border-bottom: dotted;

}

<p><a class=”txt” href=”

http://www.hatena.ne.jp/

はてな

”>Hatena!</a></p>


2 ● chankaz
●20ポイント

http://kanzaki.com/docs/htminfo.html

ごく簡単なHTMLの説明

画像にリンクをはった場合、普通は

<a href=”〜”><img src=”〜”></a>

となるので、わざわざクラスを指定しなくても、

a:link img{ text-decoration:none; border:none 0px; }

で消えると思います。お試しあれ。


3 ● mady
●20ポイント

http://www.htmq.com/

HTMLクイックリファレンス

単純に記述ルールが間違っています

クラス属性は単独で用いるか、要素に

つけるかのどちらかで使用します。

すなわち

.img a:link

では無く

a.img:link

とすれば直ります(実験済み)。


4 ● sakyo
●30ポイント

http://hp.vector.co.jp/authors/VA022006/css/index.html

正しい知識を得たい人の爲のCSS2リファレンス

なぜか、さっき書けなかった。遅いし、他の方の説明でも足りてると思います。

ポイントは不要です。(せっかく書いたので投稿だけしときます)

質問の「.img a:link」は、「img属性を持つ任意の要素に内包されるA要素」に適用されます。

例.<span class=”img”><a href=”URL”><img src=”URL”></a>

「<a href=”URL”><img class=”img” src=”URL”></a>」は、「A要素に内包されているimg属性を持つ要素」なので適用されません。

HTMLを書き換えたくない場合は、「a:link .img」とすると「A要素内のimg属性を持つ要素」に適用されます。

例.<a href=”URL”><img class=”img” src=”URL”></a>

「a:link img」とすると「A要素内のimg要素」に適用されます。全ての画像で装飾をしたくないのであれば、こちらの方が簡潔だと思います。

例.<a href=”URL”><img src=”URL”></a>

◎質問者からの返答

みなさん、ご回答ありがとうございます。

現在検証中ですがなぜかうまくいきません(泣)混乱してます(笑)

finalventさんのご回答は、柔軟な発想でなるほどと思わされました。頭かたいな>自分(笑)

ただ、テキストリンクが多いと面倒ですね;;。

chankazさん、madyさん、sakyoさんのご回答は、要素を特定する方法がいまいち良くわかってなかったので

とても参考になりました。

ただ、設定してみたのですが思い通りに行かないのですよね;;。頭冷やして検証続けてみます。

検証中にわかったのですが、WinXPのIE(最新)の場合

テーブルセルに密接するリンク付き画像の下線が消えるようです。

MacのSafari(OSX)は、セル内外問わず画像に下線がつかないようです

(IE,Safari共にスライスに配慮してるのでしょうか...実装は正しくないですね...?)

WinXP版Netscape7.1では下線が表示されます。

(スライス内画像リンクにもボーダーが表示されスライスが崩れて困ってしまう-Map設定で回避は可能なのですが....)

(上記条件は未確定です。a:linkに点線の下線を指定したときの状況です)

質問は終了としますが、解決していないのでなにかご意見ありましたらコメント頂けると幸いです。


5 ● chankaz
●0ポイント

http://www.ne.jp/asahi/minazuki/bakera/html/css/reference

水無月ばけらの CSS リファレンス

>画像に.imgクラスを指定しました

と書かれていたので勘違いしていました。

記述方法は回答3のmadyさんの書き方で直ります。

が、クラスを指定するのは画像にではなくてアンカーの方です。

<a class=”img” href=”〜”><img src=”〜”></a>

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ