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

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;
}

●質問者: wintarsnow
●カテゴリ:ウェブ制作
✍キーワード:#000000 :link border Camino COLOR
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● ke_ishi
●14ポイント

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

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

line-height: 1.5em;

とか

◎質問者からの返答

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

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

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

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


2 ● ひこ@紫のバラの人似
●14ポイント

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

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

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

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

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

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

http://www.tohoho-web.com/css/reference.htm#text-underline-posit...

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

◎質問者からの返答

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

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

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

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


3 ● crossingpoint
●14ポイント

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

◎質問者からの返答

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

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

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

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


4 ● komorebi
●14ポイント

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

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

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

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

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

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

◎質問者からの返答

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

>

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

試しに以外のCSSを全てコメントアウトしてみましたが、状況は変わりませんでした。

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

そうなんです、点線を使いたいというのもあって、border-bottomを使いたいのです。

どうしても実線の下線だと「強調」してるように見えてしまうのです。点線にすると柔らかくなって、「強調してるわけではないのだけど、リンクであることがわかる」なぁと。


5 ● amanoftaste
●14ポイント

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

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

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

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

なりそうな気がします。

◎質問者からの返答

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

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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