Javascript가 양식 필드 스타일을 변경하는 것 같습니다.

Question

아래의 class="checkMax3" 양식은 텍스트보다 약간 낮은 텍스트를 표시합니다. Chrome에서는 소문자 "p"및 "q"와 같은 문자가 필드 아래쪽으로 확장됩니다. IE 8에서는 이러한 동일한 문자의 맨 아래 부분이 표시되지 않습니다.

올바르게 기억한다면 필드에 아래의 자바 스크립트를 적용한 후에이 문제가 시작되었습니다.

"q"와 "p"와 같은 글자가 필드에 완전히 들어갈 수 있도록하는 방법에 대한 아이디어는 무엇입니까? 필드는 글자를 포함 할만큼 충분히 높지만 텍스트는 필드에서 약 5 픽셀 정도 낮습니다. 사전에

감사합니다,

존

자바 스크립트 :

<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    setMaxLength();  
    $("input.checkMax3").bind("click mouseover keyup change", function(){checkMaxLength(this.id); }) 
}); 
function setMaxLength() { 
    $("input.checkMax3").each(function(i){ 
     intMax = $(this).attr("maxlength"); 
     $(this).after("<div class='commchar2'><span id='"+this.id+"Counter'>"+intMax+"</span> characters remaining</div>"); 
     }); 
    } 
function checkMaxLength(strID){ 
     intCount = $("#"+strID).val().length; 
     intMax = $("#"+strID).attr("maxlength"); 
     strID = "#"+strID+"Counter"; 
     $(strID).text(parseInt(intMax) - parseInt(intCount)); 
     if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //good 
     if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //warning at 80% 
     if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //over 
    } 
</script> 

PHP는/HTML :

echo '<form action="http://www...com/.../submit2a.php" method="post"> 
    <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid"> 

    <div class="submissiontitle"><label for="title">Story Title:</label></div> 
    <div class="submissionfield"><input class="checkMax3" name="title" type="title" id="title" maxlength="80"></div> 

    <div class="urltitle"><label for="url">Link:</label></div> 
    <div class="urlfield"><input name="url" type="text" id="url" maxlength="500"></div> 

    <div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div> 
</form> 
'; 

CSS의 :

.submissionfield 
    { 
    position:absolute; 
    width:550px; 
    left:30px; 
    top:230px; 
    text-align: left; 
    vertical-align:text-top; 
    margin-bottom:10px; 
    padding:2px; 
    font-family: "Times New Roman", Times, serif; 
    font-size: 22px; 
    line-height: 30px; 
    color:#000000; 
    } 

Answer 1

글꼴 크기가 너무 크거나 입력의 높이와 줄 크기가 너무 크지 않습니다. 높이와 선 높이 (항상 일치 시키도록 함)와 글꼴 크기로 재생하면 얻을 수 있습니다.

편집 :

내가 문제를 참조하십시오. height, font-size 및 line-height 스타일이있는 클래스. 서브 필드는 입력이 아닙니다. 그 클래스는 div에 있습니다. 유사한 스타일을 클래스 .checkMax3에 적용하면 잘 보일 것입니다.