0

ホバー時に span タグの周囲に境界線を配置するコードの例を次に示します。

CSS

p {
    background-color: #def;
    width: 137px; /* chosen so the text *just* fits, may need to alter
                   * for different browser or OS 
                   */
}
span {
    margin: 0;
}
span:hover {
    margin: -2px;
    border: 2px solid #336;    
}

HTML

<p>
    <span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>

(デモを参照してください: http://jsfiddle.net/sS7vY/ )

-ve マージンを使用して境界線を補正し、ホバー時にテキストの位置がずれないようにします。

Firefox では、最後の単語にカーソルを合わせると次の行に折り返されますが、これは避けたいと思います。Chrome では意図したとおりに動作し、ラップすることはありません。

これは報告が必要な Firefox のバグですか?

任意のテキストに対して機能する方法で、Firefox でこのラッピングを防止する方法はありますか? (つまり、外側にさらに数ピクセルの幅を追加すること<p>は有効な解決策ではありません!)

4

2 に答える 2

2

インライン ボックス モデルに慣れていないため、どちらのブラウザのバグであるかはわかりませんが、インライン レベルのボックスであっても、アウトラインはボックスのサイズ変更に影響しないため、境界線の代わりにアウトラインを使用するとうまくいくようです。

span:hover {
    outline: 2px solid #336;
}
于 2013-09-16T16:47:50.443 に答える
0

私はあなたの実用的なソリューションを作りました：jsfiddle.net/dgY4J

「ボックスサイジング」と利用可能な幅の状況が混在しているようです。

また、CSS の box-sizingを使用すると、負のマージンを持つ境界線を処理する必要がなくなります。

最後のヒント:テキストがちょうど収まるように選択します。別のブラウザーや OS では変更が必要になる場合があります || それは反対のことをします。同じフォント タイプをレンダリングするブラウザーはありません。

于 2013-09-16T16:49:50.903 に答える