테스트 사이트 - 개발 중인 베타 버전입니다

크롬에서만 테이블 내의 input이 수직이 어긋납니다. 채택완료

추팔소 7년 전 조회 3,390

안녕하세요. 회원가입 페이지 수정하고 마무리 작업 도중 브라우저별 테스트를 해보았습니다. 익스플로러11에서는 input 수직이 동일하게 정상적이지만 구글 크롬에서는 input 수직이 조금씩 어긋납니다. 계속 이것저것 CSS 고쳐보고 했는데 무슨 문제인지 잘 모르겠습니다ㅠㅠ 테이블에 vertical-align:middle 을 줘봐도 아무런 반응이 없습니다.. 도와주세요!!

 

 

</p>

<div class="container">
<div class="line number1 index0 alt2">/* 회원가입 입력 */</div>

<div class="line number2 index1 alt1">#fregisterform {border:1px solid #DDD}</div>

<div class="line number3 index2 alt2">#fregisterform select {width:321px;padding:8px;font-family:sans-serif,"맑은 고딕","Malgun Gothic","돋움",Dotum;border:1px solid #999}</div>

<div class="line number4 index3 alt1">#fregisterform .tbl_frm09 table {width:520px;text-align:center;margin:40px 0 90px 0;border-collapse:collapse;border-spacing:0}</div>

<div class="line number5 index4 alt2">#fregisterform .tbl_frm09 td {padding:5px 0 3px 0}</div>

<div class="line number6 index5 alt1">#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}</div>

<div class="line number7 index6 alt2">#fregisterform .frm_input:hover, #fregisterform .frm_input:focus {border:1px solid #999}</div>

<div class="line number8 index7 alt1">#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>

<div class="line number9 index8 alt2"> </div>

<div class="line number10 index9 alt1"> </div>

<div class="line number11 index10 alt2"> </div>

<div class="line number12 index11 alt1"> </div>

<div class="line number13 index12 alt2">    <div class="tbl_frm09"></div>

<div class="line number14 index13 alt1">        <table></div>

<div class="line number15 index14 alt2">        <tbody></div>

<div class="line number16 index15 alt1">        <tr></div>

<div class="line number17 index16 alt2">            <td></div>

<div class="line number18 index17 alt1">                <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"></div>

<div class="line number19 index18 alt2">                <span id="msg_mb_id"></span></div>

<div class="line number20 index19 alt1">            </td></div>

<div class="line number21 index20 alt2">        </tr></div>

<div class="line number22 index21 alt1">        <tr></div>

<div class="line number23 index22 alt2">            <td></div>

<div class="line number24 index23 alt1">        <input type="password" placeholder="비밀번호" name="비밀번호" id="reg_mb_password" <?php echo $required ?> class="frm_input" minlength="3" maxlength="20"></div>

<div class="line number25 index24 alt2">      </td></div>

<div class="line number26 index25 alt1">        </tr></div>

<div class="line number27 index26 alt2">... 생략</div>
</div>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

7년 전

인풋에 float:left; 혹은 display:block; 와같은 스타일을 줘보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

vertical-align:-10px

위와같이 수치를 줘서 해보세요.

 

하지만 브라우저마다 다르다면 크로스 브라우징 문제라서 다른 방법을 알아봐야 할 것 같네요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

크롬만 어긋난건지 오페라, 파이어폭스도 어긋나는지 살펴보셔요.

크롬, 오페라, 파이어폭스, 사파리에서 똑같이 어긋나보인다면 반대로 IE의 문제이겠죠.

 

그리고  edge에서 먼저 확인하시는고 순차적으로 구버전들로 넘어가시면서 확인하셔요. 구버전인 11에서 디자인을 맞춰봤자 대부분의 사이트들은 head에 IE=edge 로 표기하듯이 가장 마지막의 최신버전을 기준으로 삼습니다. 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인