表格寬度在IE中不起作用

我有一張寬度爲161px，高度爲374px的表格，它在Firefox中效果很好，但寬度和高度在Internet Explorer中不起作用。以下是網址：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>

這裏是我的CSS

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

來源

2012-06-05 user1408440

我想補充的是，表中還沒有爲我在Chrome看起來很棒器（Chrome 19和Linux）。 – Spudley

我在頁面頂部的之上有這個，但是我沒看到它在我的頁面源代碼上，那會是我的問題嗎？ <！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> – user1408440

添加<!DOCTYPE html>到您的網頁。否則，你正在設計IE 5.5。

來源

2012-06-05 17:08:04

您已經在表格的html屬性中指定了它的寬度爲200px。我的猜測是，這是產生問題。另外，如果表超出了CSS中指定的寬度/高度設置，那麼您還沒有指定如何處理溢出，因此瀏覽器僅依賴於要求執行的操作，默認情況下，該操作將擴展超出指定的限制。嘗試設置溢出：隱藏在CSS來限制它。

來源

2012-06-05 17:08:55

你的問題是你還沒有指定DOCTYPE。

沒有文檔類型，IE總是會進入怪異模式。怪癖模式導致各種渲染故障。要解決此問題，只需在<html>標記之前將有效的文檔類型添加到頁面的頂部。

如果你不知道它的doctype使用，使用HTML5文檔類型 - 這是這麼簡單：

<!DOCTYPE html>

希望有所幫助。

來源

2012-06-05 17:09:21 Spudley

我有這個我的頁面頂部的之上，但我沒有看到它在我的頁面源，這是我的問題？ <！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> – user1408440

是的，那會成爲問題。瀏覽器希望在代碼中看到doctype，所以它需要在那裏。至於爲什麼它不在那裏，我不能回答，沒有更多的信息，但沒有它在瀏覽器看到的頁面會導致IE中的渲染問題。 – Spudley

修復DOCTYPE將解決該問題，但您需要再次查看下拉框，因爲它會超出表格和div的範圍，因爲項目比容器更寬。

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

來源

2012-06-05 17:11:45 saluce

表格寬度在IE中不起作用

回答

相關問題