0

幅161px、高さ374pxのテーブルがあり、Firefoxではうまく機能しますが、InternetExplorerでは幅と高さが機能しません。URLは次のとおりです：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モードになります。クァークズモードでは、あらゆる種類のレンダリンググリッチが発生します。この問題を修正するには、ページの上部の<html>タグの前に有効なDoctypeを追加するだけです。

使用するDoctypeがわからない場合は、HTML5Doctypeを使用してください。これは次のように簡単です。

<!DOCTYPE html>

お役に立てば幸いです。

于 2012-06-05T17:09:21.190 に答える
1

ページにを追加<!DOCTYPE html>します。それ以外の場合は、IE5.5用に設計しています。

于 2012-06-05T17:08:04.807 に答える
1

を修正するDOCTYPEと問題は解決しますが、アイテムがコンテナーの幅よりも長いため、テーブルと div の境界を超えて拡張されるため、ドロップダウン ボックスをもう一度確認する必要があります。

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

于 2012-06-05T17:11:45.987 に答える
0

テーブルのhtml属性で、幅が200pxであることを指定しました。私の推測では、これが問題を引き起こしていると思います。また、テーブルがCSSで指定された幅/高さの設定を超えた場合のオーバーフローの処理方法を指定していないため、ブラウザーは、デフォルトでテーブルを超えて拡張するように指示された内容に依存しています。指定された制限。オーバーフローを設定してみてください：それを制限するためにcssに隠されています。

于 2012-06-05T17:08:55.463 に答える