0

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

4 回答 4

4

你的问题是你没有指定一个DOCTYPE.

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

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

<!DOCTYPE html>

希望有帮助。

于 2012-06-05T17:09:21.190 回答
1

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

于 2012-06-05T17:08:04.807 回答
1

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

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

于 2012-06-05T17:11:45.987 回答
0

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

于 2012-06-05T17:08:55.463 回答