Question

我有一个宽度为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;}

Answer 1

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

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

如果您不确定要使用哪种doctype，请使用HTML5 doctype - 它就像这样简单：

<!DOCTYPE html>

希望有所帮助。

Answer 2

在您的信息页中添加<!DOCTYPE html>。否则你正在设计IE 5.5。

Answer 3

修复DOCTYPE将解决问题，但您需要再次查看下拉框，因为它将超出表格和div的范围，因为项目比容器宽。“ / p>

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

Answer 4

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

表宽度仅在IE中不起作用

4 个答案: