firefox input button or submit button line-height bug.

불여우에 버그.. 

input type="button"  or input type ="reset" or input type ="submit" 으로 만들어진 버튼들에 
line-height를 조절 할 수 없다.

button 이랑 submit 녀석들을 a tag로 만들어진 button 과 함께 스타일 먹여서 사용하고 싶었는데..
파폭에서 이상하게 나와서 찾아보니 ..

역시나 불여우 버그.. ;;

http://www.cssnewbie.com/input-button-line-height-bug/ 
작년에 알려진 버그인데.. 불여우4에서 여전히 수정이 안되어 있네;;  

해결 방안은..
1. 우선 padding으로 처리 한다.
2. button 과 a tag 버튼을 함께 나열 하지 않는다.
3. button이 다른 브라우저랑 사이즈가 살짝 작아도 그냥 견뎌야 함.
4. firefox만을 위해서.. css를 작성한다.. 

body.firefox input.sBtn{
  padding:4px 10px !important;
  line-height: normal !important;
}

body.firefox input.lBtn{
  padding:5px 10px !important;
  line-height: normal !important;
}

body.opera input.sBtn{
  padding:5px 15px !important;
  line-height: normal !important;
}
body.opera input.lBtn{
  padding:6px 15px !important;
  line-height: normal !important;
}

이상!!   사실 opera는 좀 더 멍청했다 ㅡ.ㅡ;

저작자표시