5

私が持っ
ているもの のような通常の HTML リンクがあります<a href="#">Link</a>。私のスタイルシートではdisplay: inline-block;、レイアウトに合わせて少しプッシュする必要があるため、そのリンクを に設定しました。
にfont-style設定されていitalicます。

問題
これにより、次の問題が発生します。テキストがイタリック体で設定されているため、リンクされた単語の最後の文字がリンクを囲むボックスを超えています。そのため、Safari と Chrome では、ホバー時に色の変化が「カット」されます。より明確にするためにリンクに背景色を割り当てたスクリーンショットを参照してください。
ここに画像の説明を入力
通常のリンクの色は薄い色で、青はホバーの色です。

Firefox は、何も切り詰めることなくこれを正しく管理します。

リンクのパディングを設定するのがおそらく最も簡単な解決策ですが、私は回避策のように感じます. 他の解決策はありますか？

フィドル: http://jsfiddle.net/qD78e/

4

4 に答える 4

2

次のように、常に italic クラスにパディングを追加できます。

a{
    display: inline-block;
    font-style: italic;
    font-size: 100pt;
    background-color: red;
    color: white;
    padding: 0 10px;
}

http://jsfiddle.net/8ZAUf/ - これは、私がテストしたすべてのブラウザー (opera、safari、chrome、firefox) で同じように表示されるようです。

Kamo の提案を採用することもできますが、少し変更して次のようにします。

#prob:after{
  content: '\00a0';
  font-size: 18pt;
}

http://jsfiddle.net/AZS6S/を与えると、これを再利用できます (明らかに ID ではなくクラスを使用します)。

于 2013-01-18T12:35:50.507 に答える
1

&nbsp;リンクに追加することもできます<a href="#" id="prob">Link&nbsp;</a>が、これは一般的なバグであり、苛立たしいものです。

于 2013-01-18T12:30:53.140 に答える
1

JavaScript を使用して強制的に再描画することができます。テキストがまだ境界ボックスよりも大きいため、まだ完全には正しく見えません。これは背景で確認できますが、それが問題でない場合は、この解決策を使用できます。

見る：

http://jsfiddle.net/qD78e/15/

重要なこと：

var prob = document.getElementById('prob');
prob.addEventListener('mouseover', function() {
  // force a repaint of the parentNode:
  prob.parentNode.style.color = 'blue';
}, false);
prob.addEventListener('mouseout', function() {
  // force a repaint of the parentNode:
  prob.parentNode.style.color = 'pink';
}, false);

おそらく再描画を強制するより良い方法があります。

于 2013-01-18T12:45:12.420 に答える
0 
<style>
.link{
    background:#999;
    display:inline-block;
}
.link a{
    font-style:italic;
    color:#000;

}
.link a:hover{
    color:#00F;
}
</style>

<div class="link">
    <a href="#">Link</a>
</div>

上記のコードを作成しました。これで試してみてください。

于 2013-01-18T12:45:08.780 に答える