CSSで、リンクテキストにアンダーラインを引くために以下のように記述したのですが、Macのモジラ系ブラウザ(FireFox、Camino)で見るとテキストとそのアンダーライン間に指定してある1px以上の大きな間が空いてしまい、複数行にわたってラインが引いてある場合、1行目のラインが2行目に被ってしまいます。

ちなみにWinのFireFoxではそのようにはなりません。
記述のミスや、回避策をご存じの方がいらっしゃいましたら教えて下さい。

a:link {
text-decoration: none;
color: #000000;
font-weight: bold;
border-bottom-color: #000000;
border-bottom-style: dashed;
border-bottom-width: 1px;
padding-bottom: 1px;
}

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/01/12 16:01:59
  • 終了:--

回答(6件)

id:ke_ishi No.1

ke_ishi回答回数269ベストアンサー獲得回数02005/01/12 16:21:12

ポイント14pt

テキストと下線の隙間はフォントの性質ではないでしょうか。

改行時に2行目にかぶってしまう現象はline-heightを広げれば回避できませんか。

line-height: 1.5em;

とか

id:wintarsnow

回答ありがとうございます。

フォントは、試しに他のフォントに色々変えてみましたが状況に変化ありません。ちなみに同じフォントでMacのSafariやIEではきちんと表示されるのです。

font-sizeは100%、line-heightは150%にしています。

確かにさらに行間を広げれば2行目に被らなくなるのですが、出来る事ならその大きな間を無くしたいのです。

2005/01/12 16:42:33
id:hiko_s No.2

ひこ@紫のバラの人似回答回数20ベストアンサー獲得回数02005/01/12 16:25:07

ポイント14pt

まず、リンクに下線を引くのに使うのは通常は「border」ではなくて「text-decoration」です。

そして下線を引く位置は「text-underline-position」で調整できます。(IE5.5以上)

「text-decoration」で下線を引くと、厳密な下線位置の調整はできませんが、大きな間が空いてしまうということは避けられるはずです。

「border」は枠線の指定であり、見た目は似ていても「border-bottom」をアンダーライン代わりに使うべきではないと思います。

id:wintarsnow

回答ありがとうございます。

>リンクに下線を引くのに使うのは通常は「border」ではなくて「text-decoration」です。

はい。それは知っています。

しかし、text-decorationだとテキストとラインがくっついてしまって見た目も個人的に良くない上にテキストが見にくくて嫌なので、1pxのpadding-bottomを設定して下線を引きたいのです。

2005/01/12 16:51:53
id:crossingpoint No.3

crossingpoint回答回数45ベストアンサー獲得回数12005/01/12 16:44:05

ポイント14pt

一般的には上部にある「text-decoration:underline」で指定するのがイイかと思われます。padding-bottomでアンダーラインの距離は指定できるでしょうが、挙動的にはtext-decorationで指定する方が各ブラウザ間での違いが少なくてヨイと経験上考えます。

id:wintarsnow

回答ありがとうございます。

うう…やはりtext-decoration:underlineに切り替えるのか最善策のようですね。

回避策は無いのでしょうか。

諦めきれないのでもうしばらく待ちたいと思います。

2005/01/12 16:59:40
id:komorebi No.4

komorebi回答回数133ベストアンサー獲得回数82005/01/12 20:45:39

ポイント14pt

CSSは、上書きする性質があります。

あんかー<a>以外に、重なってCSSがテキストに承継されてませんか?

<p>タグなどにmarginやline-leightなどの設定が入っていませんか?

CSSそのものは間違いありませんから、他の部分のCSS設定のせいかと思います。

それと、border-bottomでラインを引くのは間違いではありません。

実線以外を使いたい場合は、border-bottomを使っています。

id:amanoftaste No.5

amanoftaste回答回数42ベストアンサー獲得回数02005/01/15 09:21:31

ポイント14pt

http://www.tohoho-web.com/css/reference.htm#background

とほほのスタイルシート入門

GIFイメージを作って背景に指定し、横方向にリピートさせたらどうでしょう。

うまく調節すれば、どのブラウザでも同じような見た目に

なりそうな気がします。

id:wintarsnow

回答ありがとうございます。

なるほど、そういう手もありますね。

2005/01/15 11:24:30
id:oh_tsu No.6

oh_tsu回答回数48ベストアンサー獲得回数02005/01/16 00:54:20

ポイント30pt

CSSを少し勉強しているだけのものです。

記述の設定で間違っていないと思います。

そこで、MacでCSSEdit(参考URL)というソフトを使って、いろいろ試行錯誤していたところ

 font-family: Arial;

を追加設定したら、なぜか間が大きくは表示されませんでした。

面倒なこともあり、

・cssファイルを参照した形式でのチェック

・リンクが複数の行に股がった設定

・リンクの下に、文字がある設定

等でのチェックをしていないので、

回避できなかったら、大変申し訳ないです。m(_ _)m

id:wintarsnow

回答ありがとうございます!

今までbodyのfont-familyばっかりいじっていたのですが、a:linkにfont-familyを設定してArialを優先順位高い方に追加してみたら(低い方だとダメでした)、間隔狭くなりました!

なんとか出来そうです。

ありがとうございました!!

2005/01/16 13:23:39

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • アンダーライン パンデイロ惑星 (PukiWiki/TrackBack 0.3) 2006-10-10 08:59:07
    人力検索はてな - CSSで、リンクテキストにアンダーラインを引くために以下のように記述したのですが、Macのモジラ系ブラウザ(FireFox、Camino)で見るとテキストとそのアンダーライン間に..
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません