frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

firefoxでbutton要素がクリック時に動くのを防ぐ

スポンサードリンク


スポンサードリンク


button要素って結構厄介でデフォルトのスタイルが当たっています。
button要素の中に画像を指定した場合

  background: none;
  border: none;
  cursor: pointer;

で十分かと思いますが、その場合firefoxでクリックしたとき動きます。
下記お試しください。

See the Pen RgpgGj by funclur (@funclur) on CodePen.

左のボタンがchromeで問題ないですがfirefoxで数px動きます。

これを解消するために

  padding: 0;

を追加します。
それが右のボタンです。

しかし、IEでは解消されませんでした。
ん~IE...。