[CSS] input type="image", "text" 세로 정렬

ie는 type="text" 와 type="images"가 가지는 영역을 다르게 랜더링한다.



div.box{border:1px solid #3366ff;}
input.style{border:1px solid #333;width:100px;height:20px;}

<div class="box">
 <input type="text" class="style" /> <input type="image" src="./images/common/login_btn.gif" />
</div>








이 부분은 우리가 각 태그가 가지는 영역을 없애기 위해 
CSS시작에 padding:0px;margin:0px;를 주고 시작하듯
input 에 vertical-align:top;을 주면 해결이 된다.

그 후에는 컨디셔널코멘트로 위치값을 조정하자.



Add
*input 을 float으로 띄우는 방법도 있음.

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading