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

Yorum eklemek için çok geç, 09-10-2011 tarihinde yoruma kapatıldı.