테이블 너비가 IE에서만 작동하지 않습니다

너비가 161px이고 높이가 374px 인 테이블을 가지고 있으며 Firefox에서 잘 작동하지만 너비와 높이가 Internet Explorer에서 작동하지 않습니다. URL은 http://nonudot.io-web.com/demo입니다. 테이블 너비가 IE에서만 작동하지 않습니다

<div class="BottomBorderBoxes"> 
<table width="200" cellspacing="0" cellpadding="0" border="0" style="font-size:13px;"> 
<tbody> 
    <tr> 
     <td> 
     <h2>Concern Area 1</h2> 
     </td> 
    </tr> 
    <tr> 
     <td>Describe Location<br> 
     (Please Use Street Names)<br> 
     <br> 
     <div class="EditingFormControlNestedControl"> 
      <input type="text" class="TextBoxField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_StreetName" maxlength="300" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_StreetName"> 
     </div></td> 
    </tr> 
    <tr> 
     <td><br> 
     City<br> 
     <div class="EditingFormControlNestedControl"> 
      <input type="text" class="TextBoxField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_City" maxlength="300" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_City"> 
     </div></td> 
    </tr> 
    <tr> 
     <td><br> 
     Type of Issue<br> 
     <div class="EditingFormControlNestedControl"> 
      <select class="DropDownField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_Issue" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_Issue"> 
       <option value="1">Needs curb cut or existing curb cut needs improvement</option> 
       <option value="2">Needs wheelchair ramp or existing ramp needs improvement</option> 
       <option value="3">Crosswalk improvements needed</option> 
       <option value="4">Uneven surface</option> 
       <option value="5">Other (please indicate below)</option> 

      </select> 
     </div>&nbsp;<br> 
     <div class="EditingFormControlNestedControl"> 
      <input type="text" class="TextBoxField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_IssueComment" maxlength="300" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_IssueComment"> 
     </div></td> 
    </tr> 
    <tr> 
     <td><br> 
     Addtional Input<br> 
     <div class="EditingFormControlNestedControl"> 
      <textarea class="TextAreaField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_AddInput" cols="20" rows="2" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_AddInput"></textarea> 
     </div><br> 
     &nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
    </tr> 
</tbody>

여기

.BottomBorderBoxes { 
border: 1px solid black; 
float: left; 
height: 374px; 
margin-right: 5px; 
margin-top: 10px; 
padding: 7px; 
width: 161px;}

출처

2012-06-05 user1408440

나는 테이블도 크롬에 나를 위해 (크롬 19, 리눅스를) 잘 보이지 않는 것을 추가합니다. – Spudley

나는 이것을 내 페이지 상단의 위에 올려 놓았지만 내 페이지 소스에서 보지 못했다. 그게 내 문제 일까? – user1408440

이 페이지에 <!DOCTYPE html> 추가 내 CSS입니다. 그렇지 않으면 당신은 IE 5.5 용으로 설계하고 있습니다.

출처

2012-06-05 17:08:04

표의 html 속성에서 너비가 200 픽셀임을 지정했습니다. 내 생각 엔이게 문제를 일으키는 것 같아. 또한 테이블이 CSS에 지정된 너비/높이 설정을 초과하는 경우 오버플로로 수행 할 작업을 지정하지 않았으므로 브라우저는 기본적으로 테이블에 대해 수행 할 작업에 의존합니다 지정된 제한값. 그것을 제한하기 위해 css에 overflow : hidden을 설정해보십시오.

출처

2012-06-05 17:08:55

문제는 DOCTYPE을 지정하지 않았기 때문입니다.

Doctype이 없으면 IE는 항상 Quirks 모드로 전환됩니다. Quirks 모드는 모든 종류의 렌더링 결함을 유발합니다. 이 문제를 해결하려면 <html> 태그 앞에 페이지 상단에 올바른 doctype을 추가하기 만하면됩니다.

사용할 DOCTYPE 확실하지 않은 경우, HTML5의 문서 타입을 사용 -이이만큼 간단합니다 도움이

<!DOCTYPE html>

희망을.

출처

2012-06-05 17:09:21 Spudley

나는 이것을 가지고있다. 위 내 페이지의 상단하지만 내 페이지 소스에 그것을보고, 그게 내 문제가 될 것이라고? – user1408440

예, 그렇습니다. 문제가된다. 브라우저는 코드에서 doctype을 볼 것으로 예상하므로 거기에 있어야합니다. 왜 거기에 없는지에 관해서는, 나는 더 이상의 정보없이 대답 할 수는 없지만 브라우저가 보는 페이지에 IE를 넣지 않으면 IE에서 렌더링 문제가 발생할 것입니다. – Spudley

DOCTYPE을 수정하면 문제가 해결되지만 드롭 다운 상자를 다시 살펴 봐야합니다. 항목이 컨테이너보다 길기 때문에 div와 div의 경계를 넘어 확장됩니다.

http://jsfiddle.net/y2dGZ/1/

출처

2012-06-05 17:11:45 saluce

테이블 너비가 IE에서만 작동하지 않습니다

답변

관련 문제