表格宽度仅在 IE 中不起作用答案

【问题标题】：Table width not working in only IE表格宽度仅在 IE 中不起作用
【发布时间】：2012-06-09 17:25:31
【问题描述】：

我有一个宽度为 161 像素、高度为 374 像素的表格，它在 Firefox 中运行良好，但宽度和高度在 Internet Explorer 中不起作用。这是网址：http://nonudot.io-web.com/demo。

<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;}

【问题讨论】：

我要补充一点，该表在 Chrome（Chrome 19、Linux）中对我来说也不是很好。
我在页面顶部的上方有这个，但我在页面源代码中没有看到它，这是我的问题吗？渡//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

标签： html css internet-explorer html-table

【解决方案1】：

将<!DOCTYPE html> 添加到您的页面。否则，您正在为 IE 5.5 进行设计。

【讨论】：

【解决方案2】：

您已在表格的 html 属性中指定其宽度为 200 像素。我的猜测是这会产生问题。此外，如果表格超出 CSS 中指定的宽度/高度设置，您还没有指定如何处理溢出，因此浏览器只是依赖于它被告知要做的事情，默认情况下，对于表格来说，是扩展超出指定的限制。尝试在 css 上设置 overflow: hidden 来限制它。

【讨论】：

【解决方案3】：

你的问题是你没有指定DOCTYPE。

如果没有 doctype，IE 将始终进入 Quirks 模式。 Quirks 模式会导致各种渲染故障。要解决这个问题，只需在页面顶部的<html> 标记之前添加一个有效的文档类型。

如果您不确定要使用哪种文档类型，请使用 HTML5 文档类型 - 就这么简单：

<!DOCTYPE html>

希望对您有所帮助。

【讨论】：

我在页面顶部的上方有这个，但我在页面源代码中没有看到它，这是我的问题吗？渡//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
是的，这就是问题所在。浏览器希望在代码中看到 doctype，所以它需要在那里。至于为什么不存在，没有更多信息我无法回答，但是在浏览器看到的页面中没有它会导致 IE 中的呈现问题。

【解决方案4】：

修复DOCTYPE 将解决此问题，但您需要再次查看下拉框，因为它会超出表格和 div 的边界，因为项目的长度大于容器的宽度。

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

【讨论】：