0

これをチェックしてください：

http://codepen.io/maxwbailey/pen/vGKBr

カーソルを合わせていないときは問題なく表示されますが、<button>and<input>要素にカーソルを合わせると、その下のテキストが少しぶつかり合っていることがわかりますが、要素にカーソルを合わせて<a>も同じ効果は生じません。これは、要素に線が適用されているにもかかわらず、<button>and<input>要素がまだ s として表示されているためですinline-block(通常の s とは異なる境界線、パディング、およびマージンの処理)。inlinedisplay: inline !important;

これをオーバーライドする方法はありますか？display: inline背景と同じ色のボーダーなどのハックを介して実行できることは知っていますが、それらを適切に作成する方法があるかどうかを知りたいです。

注: ここでの問題は、テキストがぶつけられていることではありません (これはその影響ですが)。別の言い方をしているにもかかわらず、ブラウザがボタンを強制的にinline-block. テキスト バンピングが発生しないようにする方法を提供してくれたすべての人に感謝しますが、それはここでの本当の問題ではありません。

ありがとう！

4

3 に答える 3

0

あなたの質問は少し誤解を招くようです。あなたのボタンタグは、実際には、通常の状態とホバー状態の両方で display:inline に設定されています。あなたが持っている質問は、ロールオーバー時に下のテキストがぶつからないようにする方法です。現在のように下の境界線を使用する代わりに、ホバー状態で次を使用して下線を作成してみませんか?

text-decoration:underline;
于 2013-08-17T19:57:06.460 に答える
0

前の回答に同意しますが、境界線の柔軟性が必要な場合、パディングを使用して配置場所を調整できるなど、使用できます

border:1px solid transparent;

背景の色は問題にならないので、bg と同じ色を使用するほどハックではありません。

于 2013-08-17T20:03:54.127 に答える