크롬에서만 테이블 내의 input이 수직이 어긋납니다.
본문
안녕하세요.
회원가입 페이지 수정하고 마무리 작업 도중 브라우저별 테스트를 해보았습니다.
익스플로러11에서는 input 수직이 동일하게 정상적이지만
구글 크롬에서는 input 수직이 조금씩 어긋납니다.
계속 이것저것 CSS 고쳐보고 했는데 무슨 문제인지 잘 모르겠습니다ㅠㅠ
테이블에 vertical-align:middle 을 줘봐도 아무런 반응이 없습니다..
도와주세요!!
/* 회원가입 입력 */
#fregisterform {border:1px solid #DDD}
#fregisterform select {width:321px;padding:8px;font-family:sans-serif,"맑은 고딕","Malgun Gothic","돋움",Dotum;border:1px solid #999}
#fregisterform .tbl_frm09 table {width:520px;text-align:center;margin:40px 0 90px 0;border-collapse:collapse;border-spacing:0}
#fregisterform .tbl_frm09 td {padding:5px 0 3px 0}
#fregisterform .frm_input {width:300px;height:30px;padding:0 10px;letter-spacing:1px;font-size:15px;border:1px solid #DDD;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px}
#fregisterform .frm_input:hover, #fregisterform .frm_input:focus {border:1px solid #999}
#fregisterform .btn_submit {display:block;margin:0 auto 35px auto;width:320px;height:35px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background:#1f8ecd;border:1px solid #1a78ae}
<div class="tbl_frm09">
<table>
<tbody>
<tr>
<td>
<input type="text" placeholder="아이디" name="아이디" value="<?php echo $member['mb_id'] ?>" id="reg_mb_id" <?php echo $required ?> <?php echo $readonly ?> class="frm_input <?php echo $readonly ?>" minlength="3" maxlength="20">
<span id="msg_mb_id"></span>
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="비밀번호" name="비밀번호" id="reg_mb_password" <?php echo $required ?> class="frm_input" minlength="3" maxlength="20">
</td>
</tr>
... 생략
답변 3
크롬만 어긋난건지 오페라, 파이어폭스도 어긋나는지 살펴보셔요.
크롬, 오페라, 파이어폭스, 사파리에서 똑같이 어긋나보인다면 반대로 IE의 문제이겠죠.
그리고 edge에서 먼저 확인하시는고 순차적으로 구버전들로 넘어가시면서 확인하셔요. 구버전인 11에서 디자인을 맞춰봤자 대부분의 사이트들은 head에 IE=edge 로 표기하듯이 가장 마지막의 최신버전을 기준으로 삼습니다.
vertical-align:-10px
위와같이 수치를 줘서 해보세요.
하지만 브라우저마다 다르다면 크로스 브라우징 문제라서 다른 방법을 알아봐야 할 것 같네요.
인풋에 float:left; 혹은 display:block; 와같은 스타일을 줘보세요
답변을 작성하시기 전에 로그인 해주세요.
