크로스브라우징 input text 글줄 정렬
글줄 정렬이 맞는 표현인지 모르겠는데;;
vertical-align 의 기준선을 일정하게 맞추는 방법이라고 생각하시면 될 것 같습니다.
저는 이 방법을 쓰기 전엔
<style>input {padding:3px}</style><input type='text' />
처럼 작업했었는데, 이게 브라우저 별로 글자가 써지는 높이가 미세하게 다르더란 겁니다.
리뉴얼된 sir 메인메뉴 같이 글자를 세로 정렬할 때도 문제가 있었구요.
그래서 이 방법 저 방법 찾아보고 궁리해보다가 다음과 같은 방법을 찾았습니다.
(더 좋은 방법이 있다면 당연히 제보해주세요.)
<style>input[type=text] {height:30px;line-height:2.4em}</style><input type='text' />
이렇게 작업하면 크로스브라우징 확인 시에도 텍스트의 세로 정렬 기준선이 일정하게 나온답니다.
ie6 까지 고려하면
<style>input[type=text] {height:30px;line-height:2.4em}.textbox {height:30px;line-height:2.4em !important;line-height:2.1em}</style><input type='text' class='textbox' />
처럼 작업하시는 게 더 좋습니다.
line-height:2.4em !important;line-height:2.1em
에서 앞에 속성에 !important 를 주면 뒤에 같은 속성이 나와도 우선적으로 적용되는 것은 아시죠?
근데 ie6 에서는 !important 를 무시하고 뒤의 새로 나오는 같은 속성 값이 적용됩니다.
* 핵을 안 쓰고 !important 만으로 ie6 에 대응할 수 있다는 겁니다.
ie6에서는 line-height 를 0.3em 적게 줄 때가 있는데 이건 아직 테스트를 더해봐야 될 거 같습니다. ㅠ
더 자세한 팁은 웹표준 강좌 때 확실하게 정리해서 찾아뵐께요 ㅎㅎㅎ
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 13개
부득이하게요.. 거의 대부분이 margin 값과 padding 값이 안맞을 때 많이 발생하더라구요 ㅠ
아 그리고 line-height 로 잡는부분이 거의 모든 브라우저에서 맞추기 제일 좋습니다.
ie7 과 오페라 에서 나오는것이랑 ie8과 크롬 ie9 에서 나오는게 또 서로 상이하죠..
IE6을 반드시 처리해야할 상황이라면 (CC)Conditional Comment를 통하는 것을 추천합니다;
CC를 통해 css를 따로 로드하는 방법도 있지만
http://html5boilerplate.com
boilerplate의 방법으로 <html> 태그에 CC를 이용해 IE 에 맞는 클래스를 주는 방법을 살펴봐 주세요.
그렇지만 요구사항에 IE6이 무조건 있어야 한다가 아니라면 과감하게 IE6은 버리는 것이
IE6을 제거하는 길이겠죠 ㅎㅎㅎ
http://www.quirksmode.org/css/condcom.html 언급해주신 CC에 대한 내용입니다. 저도 처음엔 용어를 몰라서 뭔가 했는데 이거였군요. 감사합니다.
정도로 줄 거 같습니다.
padding 으로 정렬을 하되. 글자의 line-height 는 글씨 크기와 같게 지정을 하면
아마도(?) 브라우저에서 같게 보이지 않을까 싶네요.
직접 브라우저 테스트를 하기 힘들어서 적어보기만 합니다.(Mac이라 IE가 ;)
저는 핵, important도 안씁니다;;
1,2픽셀따윈 자기 합리화시면 됩니다..ㅡ/.,ㅡ;;;;
그게 남자임 -/_-)b
이걸로 line-height 를 다 잡을 수 있을까요?
현재 fact 는 input text 의 글자의 상하단의 위치가 (그러니까 입력받는 곳에서의 위치)서로 상이 하는 문제인데..
여튼 혼란을 야기시킨점 죄송합니다~즐거운 주말 보내세용~