2009-04-10 19 views
5

要素の行の高さを増やすと、各行の行間にギャップが発生します。あなたは特定のギャップを見ていないので、これは大丈夫です。テキストの行間の空白を削除する

しかし、狭い列があり、複数の行にまたがるリンクがある場合は問題があります。リンク上でマウスを動かすと、線の間に小さな隙間ができ、リンクホバー効果の点滅が点滅します。

デザイン/ユーザビリティの観点から、私はこれが悪いユーザエクスペリエンス(誰もランダムな点滅が好きではない)のためだと感じています。テキストが大きくなったときに、私はいくつかのケースでは、この出来事を防ぐために、リンクにいくつかのパディングを追加することができますが、それは動作しません

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est. Nunc aliquam, eros a aliquam consequat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Integer venenatis. Pellentesque enim. Maecenas aliquet, tortor at molestie sodales, urna velit pulvinar lorem, ac malesuada nibh turpis eu tortor.

;:これでそれを試してみてください私はもっ​​と詰め物が必要です。誰でもソリューションのアイデアはありますか?

+0

「テキストが大きいときには機能しませんが、より多くのパディングが必要です」と正確には何を意味していますか?あなたは例を挙げることができますか?パディングの相対単位を使用しないでください。 – mercator

+0

おそらく、上のリンクを持つFirebugを使って試してみることができます(今は固定されています)。リンクに背景を追加すると、ギャップが表示されます。パディングを増やすと、ギャップが消えます。フォントサイズを大きくすると、ギャップが再度表示されます。したがって、パディングは時々動作しますが、信頼性がありません。 – DisgruntledGoat

答えて

6

狭い列の<a>要素のdisplay:blockを設定して、点滅する問題を解決してください。

+0

ひどい解決策ではありません。この場合の問題点は、マウスが「生成されたボックス」内にあるがリンク上(すなわち、ラインの右側)に実際にはないときにホバー効果が現れることである。 – DisgruntledGoat

1

あなたは各行ラウンドスパンを入れて、パディングを設定するには、インラインブロックに

#wrap {font-size:14px; line-height:16px;} 
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;} 
a:hover {background:red;} 

<div id="wrap"> 
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" > 
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk 
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f 
    </div> 
+0

これは意図的なものかどうか分かりませんが、あなたのスパンでは、2番目のディスプレイは表示されません。つまり、インラインブロックが-moz-inline-blockを覆いますか? –

+0

はいそうです。 ffx 2はインラインブロックをサポートしていないので、hackが必要ですが、ffx 3はそれをサポートしているので、インラインブロックを最後に置くと、それが適用されていることが確認されます – wheresrhys

0

使用相対単位をそれを回すことができ、各ラインの始点と終点を知っていれば。

Firebug/Dragonflyを使用してpadding: 0.2ex 0; background: red;を例のリンクに追加すると、フォントサイズ(CSSまたはズームインで設定)に関係なく、問題なく機能します。

Firefoxでフォントサイズを変更する際の唯一の問題は、バックグラウンドが前の行と重複し始めてしまうことです。それはline-height問題です。

関連する問題