2010-11-22 5 views
1

은 ie7 렌더링에서 이상한 문제를 발견했습니다 (이전 버전의 경우 일 수 있음). td 안에 입력하면 다른 브라우저 (ff, ie8, chrome)보다 높은 셀을 만듭니다. 모든 여백이 재설정되고 패딩이 제거되고 cellcpacing이 0으로 설정됩니다. 그 (것)들을 동등 물로 만드는 유일한 방법은 모든 tds의 픽셀 높이를 지정하는 것입니다. 그러나 그것은 나에게 아주 못 생겼습니다.ie7 td 입력이 추가로 수직 인 공간

여기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <link type="text/css" href="styles/main.css" rel="Stylesheet" /> 
</head> 
<body> 
    <br /> 
    <table cellspacing="0" cellpadding="0" border="0" class="details-table"> 
     <tr class="details-row"> 
      <td> 
       <label for="txtFirstName">First Name</label> 
      </td> 
      <td> 
       <label for="txtFirstName">Last Name</label> 
      </td> 
     </tr> 
     <tr class="alt-details-row"> 
      <td> 
       <label for="txtFirstName">First Name2</label> 
       <input type="text" class="details-input textField" id="txtFirstName2" name="txtFirstName2" /> 
      </td> 
      <td> 
       <label for="txtLastName2">Last Name2</label> 
       <input type="text" class="details-input textField" id="txtLastName2" name="txtLastName2" /> 
      </td> 
     </tr> 
     <tr class="details-row"> 
      <td> 
       <label for="txtFirstName3">First Name3</label> 
       <input type="text" class="details-input textField" id="txtFirstName3" name="txtFirstName3" /> 
      </td> 
      <td> 
       <label for="txtLastName3">Last Name3</label> 
       <input type="text" class="details-input textField" id="txtLastName3" name="txtLastName3" /> 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 

는 CSS입니다 : 여기

는 HTML입니다

html, 
body, 
form, 
table, 
tr, 
td 
{ 
    margin: 0; 
    padding:0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
} 


body 
{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px ; 
} 

input.textField 
{ 
    margin:0px; 
    padding:0px; 
    border: 1px solid #BFBFBF; 
    height: 17px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px ; 
} 

.details-table 
{ 
    width:100%; 
    color: #666 
} 

.details-table tr.details-row, 
.details-table tr.details-row td 
{ 
    background: #ebe4bc; 
} 

여기 스크린 샷입니다 : 난 당신이를 변경하여 문제를 해결할 수 있다고 생각하지 않습니다 alt text

답변

1

높이가 td 또는 입력 인 요소 중 하나 일 수 있습니다. IE7 모드에서 해당 입력에 대해 1 오프셋 자동 생성. IE8 또는 다른 유명한 브라우저에서 여분의 1 오프셋이 생성되지 않습니다.

IE7의 버그라고 생각합니다.

2

float : 왼쪽 요소가 도움이 될 수도 있습니다.