Firefox button taginda padding ve border sorunu

Daha önce yaşadığım ve yaklaşık 30 dakikama mal olan bir problemdi bu. Aynı problemle bir başka projede tekrar karşılaştım, not almak gerekliymiş demekki -)

Button tag’ını severim kullanırım. Button tagı sayesinde;

  • input[type="submit"] gibi css atraksyonlarına gerek kalmaz.
  • button{} selector’ü input[type="submit"]{}
    selector’ünden daha hızlıdır.
  • Form’larda post/reset gibi event’lar için kullanılabilir.
  • Tag içerisinde html kullanılabilir.
  • Projenin tamamında kullanılacak buton görselleri tek etiket ile şekillendirilir.
  • Daha kolay bir regex ile tüm buton taglarını grep’leyebiliriz.
    • Button tag’ını grep’lemek için;
      $ grep -rHn '<button.*>' *
    • Input butonları grep’lemek için;
      $ grep -rHn '<input.*type=\"submit\".*' *

Firefox button tagına padding ve border -input button a da- uyguluyor. Chrome, Safari, Opera gibi tarayıcılarda bu tür bir problem ile karşılaşmadım.

Çözüm;

button::-moz-focus-inner {
border: 0;
padding: 0;
}

Şöyle ecnebice kaynaklarda var;

http://forum.userstyles.org/comments.php?DiscussionID=2773
http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/
http://stackoverflow.com/questions/1433232/moz-focus-inner