0

私のページには次のhtml構造があります

<button class="badbutton"><span>Text</span></button>

これは、ボタンがアクティブなときにスパンを相対的に配置することで、ボタンが押されたときにテキストを少し下に移動できるようにするためです。

ただし、Firefox には解決できない問題があります。ボタンが押されると、その内側のスパンに点線のアウトラインが表示され、ボタンが押されなくなった後も保持されます。私が説明するものを描いた画像へのリンクを添付しています。

http://i.imgur.com/6ReslLc.png

CSSで考えられることはすべて試しましたが、役に立ちませんでした。

a, a:active img, 
span, 
span:active,
span:focus, 
button, 
button:active span, 
button:focus span, 
button:focus, 
button:active {
    border: none;
    outline: none !important;
}

どんな助けでも大歓迎です。

編集: 友人の提案の後、私はスパンを完全に捨てて、代わりに押されたときにボタンの上部のパディングを増やすことを選択しました. 残念ながら、Firefox は単語の周りにアウトラインを追加し続けます。

4

1 に答える 1

2

アウトラインはフォーカスインジケーターです。

ボタン自体にCSSの境界線やアウトラインは実装されていません。これは、これらの動作がまったく異なるためです。

あなたはそれを取り除くことができます

::-moz-focus-inner { 
  border: 0;
  padding: 0;
}
于 2013-01-22T15:31:45.453 に答える