form에서 input type의 text field의 높이를 조절하고 싶을 때가 있습니다.
글자 크기를 키워버리면 문제가 되지 않지만~ 글자 크기는 그냥 두고 싶을 때가 있지요~
그래서 CSS에서 높이를 키워 보았습니다.
height: 18px;
firefox는 이쁘게 잘 나오네요 그에 반해 Internet Explorer 9 에서는 '아이디'라는 글씨가 위로 붙어버리네요
이러면 곤란한데 말입니다~ 크로스 브라우징은 정말 고통스럽단 생각을 또 다시 하게되는 순간입니다.
그래서 이걸 해결하기위한 방법: 패딩 값을 조절해서 맞추자!!
Height:18px;
padding:5px;
확실하게 보이기 위해 5px로 했습니다.
padding값을 변경했기 때문에 전체적으로 폼의 위치가 흐트러졌지만 잘 조절하면 되겠군요~
한글과 영어가 약간의 차이를 보이고 있지만, 어느정도 조절이 가능하다는게 보이네요~ 잘 맞춰보면 될 것 같습니다.
이 방법의 포인트!!는 IE와 Firefox가 둘 다 영향을 받는다는 것입니다.
또 다른 방법: 줄 높이를 조절해서 맞추자!!
Height:18px;
line-height: 32px; (em 단위도 됩니다.)
확실하게 보이기 위해 좀 수치를 크게 잡았습니다.
전체 구조를 흐트리지 않고 작업을 할 수 있는 것이 장점입니다.
이 방법의 포인트!!는 IE에만 적용이 된다는 것입니다.
좋은 방법을 잘 선택해서 작업하면 될 것 같습니다.
