HTML表单显示我在IE9中的需求,但在Chrome,IE10中完全不同

时间:2014-02-05 19:52:44

标签: html css google-chrome internet-explorer-9 internet-explorer-10

我正在创建一个将在第三方软件中使用的HTML表单。我在IE9中创建了表单,所有内容都显示了我想要的内容。当用IE10或Chrome打开时,它变得非常混乱。似乎样式/ css完全被忽略。我需要一些帮助来确定我做错了什么来阻止跨浏览器功能。代码如下。

    <STYLE>
        fieldset {
            width: 655 px;
            padding: 10 px;
            background-color: transparent;
            border: 1px solid #A5C0DF
    }

    TABLE {
        width: 630 px;
        align: left;
        text-align: left;
        border-color: #000000;
        border: #000000;
        table-layout: fixed;
    }

    td {
        border: none;
        text-align: left;
        vertical-align: middle;
        word-wrap: break-word;
    }

    input {
        width: 100%;
        text-align: left;
    }

    select {
        width: 100%;
    }

    textarea {
        width: 100%;
        overflow: visible;
    }
    Label {
        width: 100%;
    }

    .mcInput {
        border: 1px solid #A5C0DF;
        font: 12 pt Times New Roman, Arial, Helvetica, sans-serif;
        color: blue;
        margin-bottom: 1px;
    }

    .mcPage{
        page-break-after:always;
        width:100%;
    }

    .center {
        text-align: center;
    }

    button {
        border-radius: 50%;
        border: 1px solid #000;
        text-align: center;
    }

    .bttnstyle {
        text-align: center;
        width: 109 px;
    }

    .bttntwo {
        text-align: center;
        width: 40 px;
        font-size: 12;
    }

    .readonly { 
        color: black;
        background-color: #f4f4f4;
    }
</STYLE>

<FORM>
<DIV id="mcPage_001" name="mcPage_001"> 

<fieldset>  
<TABLE cellpadding="0" cellspacing="0" style="width: 620 px">
    <tr>
        <td style="width: 120 px">
            <LABEL>CU #:</LABEL>
        </td>

        <td style="width: 190 px">
        <INPUT
            type="text"
            id="mastercontrol.form.number"
            alt="CU Number"
            title="CU Number"
            class="mcInput center"
            readonly="true">
        </td>

        <td style="width: 120 px">  
            <LABEL style="padding-left: .75em">Date Initiated:</LABEL>
        </td>

        <td style="width: 190 px">
        <INPUT
            type="text"
            id="mastercontrol.form.created"
            alt="Date Initiated"
            title="Date Initiated"
            class="mcInput center"
            readonly="true">
        </td>
    </tr>

    <tr>
        <td>
            <LABEL>Form Initiator:</LABEL>
        </td>

        <td colspan="3">
        <INPUT
            type="text"
            id="mastercontrol.form.creatorname"
            alt="Form Initiator"
            title="Form Initiator"
            class="mcInput"
            readonly="true">
        </td>
    </tr>
</TABLE>
</fieldset><br><br>

<fieldset>

<TABLE cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="2" style="width: 150 px">
            <LABEL style="font-size: 14 px"><b>Location(s) Affected:</b></LABEL>
        </td>

        <td style="width: 200 px">
        <select 
            onchange="locOther();"
            id="cboLocationsAffected"
            alt="Locations Affected"
            title="Locations Affected"
            class="mcInput">
                <option value=""></option>
                <option value="option 1">option 1</option>
                <option value="option 2">option 2</option>
                <option value="option 3">option 3</option>
                <option value="option 4">option 4</option>

        </select>
        </td>

        <td style="width: 65 px">
            <LABEL style="padding-left: .75em; font-size: 14 px"><b>Other:</b></LABEL>
        </td>

        <td style="width: 215 px">
        <INPUT 
            type="text"
            id="txtLocationAffectedOther"
            alt="Location Affected Other"
            title="Location Affected Other"
            value=" N/A"
            maxlength="29"
            class="mcInput">
        </td>
    </tr>

    <tr>
        <td style="width: 110 px; text-align: right">
        <input
            onclick="addItems(); Limit();"
            type="button"
            id="txtAdd"
            alt="Add Locations"
            title="Add Locations"
            value="Add"
            class="button bttntwo">
        </td>

        <td style="width: 40 px">
        <input
            onclick="Clear();"
            type="button"
            id="txtClear"
            alt="Clear Locations"
            title="Clear Locations"
            value="Clear"
            class="button bttntwo">
        </td>

        <td colspan="3">
        <TEXTAREA
            type="text"
            id="txtLocations"
            alt="All Locations"
            title="All Locations Affected"
            style="height: 63 px"
            readonly="true"
            class="mcInput"
                onKeyDown="limitText(this.form.txtLocations,this.form.countdown,200);" 
                onKeyUp="limitText(this.form.txtLocations,this.form.countdown,200);"></TEXTAREA>
        </td>
    </tr>
</TABLE>

<TABLE cellspacing="0" cellpadding="0">
    <tr>
        <td style="width: 290 px">          
            <LABEL style="font-size: 14 px"><b>Application and/or System Affected:</b></LABEL>
        </td>

        <td style="width: 340 px">
        <INPUT 
            type="text"
            id="txtApplicationSystemAffected"
            alt="Application System Affected"
            title="Application System Affected"
            maxlength="48"
            class="mcInput"><br>
        </td>
    </tr>

    <tr>
        <td>
            <LABEL style="font-size: 14 px; height: 63 px"><b>Servers/Workstations/Equipment Affected:</b></LABEL>
        </td>

        <td>
        <TEXTAREA 
            type="text"
            id="txtEquipmentAffected"
            alt="Equipment Affected"
            title="Equipment Affected"
            maxlength="48"
            class="mcInput"
            style="height: 63 px"
                onKeyDown="limitText(this.form.txtLocations,this.form.countdown,600);" 
                onKeyUp="limitText(this.form.txtLocations,this.form.countdown,600);"></TEXTAREA>
        </td>
    </tr>
</TABLE>

<TABLE cellspacing="0" cellpadding="0">
    <tr>    
        <td>
            <LABEL style="font-size: 14 px"><b>Description of Updated to be Applied:</b></LABEL>
        </td>
    </tr>

    <tr>
        <td>
        <TEXTAREA
            type="text"
            id="txtDescriptionUpdatesApplied"
            alt="Description Updates Applied"
            title="Description Updates Applied"
            style="height: 150 px" 
            class="mcInput"
                onKeyDown="limitText(this.form.txtDescriptionUpdatesApplied,this.form.countdown,1000);" 
                onKeyUp="limitText(this.form.txtDescriptionUpdatesApplied,this.form.countdown,1000);"></TEXTAREA>
        </td>
    </tr>
</TABLE>

<TABLE cellspacing="0" cellpadding="0">
    <tr>
        <td rowspan="7" style="background-color: #E8E8E9; width: 85 px">
            <LABEL style="font-size: 14 px"><b>Risk<br>Assessment:</b><br></LABEL><LABEL style="font-size: 13 px"><i>&nbsp;(check all<br>&nbsp;that apply)</i></LABEL>
        </td>

        <td style="width: 25 px">
        <INPUT 
            type="checkbox"
            id="chkReviewUpdatesConducted"
            alt="Review Updates Conducted"
            title="Review Updates Conducted"
            value="A review of potential critical updates was conducted">
        </td>

        <td style="width: 520 px">
            <LABEL style="padding-left: .5em">A review of potential critical updates was conducted</LABEL>
        </td>       
    </tr>

    <tr>
        <td>
        <INPUT 
            type="checkbox"
            id="chkUpdatesAffectValidatedSystems"
            alt="Updates Affect Validated Systems"
            title="Updates Affect Validated Systems"
            value="Updates could affect Validated Systems">
        </td>

        <td>
            <LABEL style="padding-left: .5em">Updates could affect Validated Systems</LABEL>
        </td>
    </tr>

    <tr>
        <td>    
        <INPUT 
            type="checkbox"
            id="chkInstallConfigChangesDocumented"
            alt="Install Config Changes Documented"
            title="Install Config Changes Documented"
            value="Installation instructions/configuration changes are documented">
        </td>

        <td>
            <LABEL style="padding-left: .5em">Installation instructions/configuration changes are documented</LABEL>
        </td>
    </tr>

    <tr>
        <td>
        <INPUT 
            type="checkbox"
            id="chkRevertMethodIdentified"
            alt="Revert Method Identified"
            title="Revert Method Identified"
            value="A method to revert back has been identified">
        </td>

        <td>
            <LABEL style="padding-left: .5em">A method to revert back has been identified</LABEL>
        </td>
    </tr>

    <tr>
        <td>    
        <INPUT 
            type="checkbox"
            id="chkAffectedVendorsContacted"
            alt="Affected Vendors Contacted"
            title="Affected Vendors Contacted"
            value="Affected application vendors have been contacted to ensure that the updates will run at the to be applied version">
        </td>

        <td>
            <LABEL style="padding-left: .5em">Affected application vendors have been contacted to ensure that the updates</LABEL>
        </td>
    </tr>

    <tr>
        <td>
            <LABEL></LABEL>
        </td>

        <td>
            <LABEL style="padding-left: .5 em">will run at the to be applied version</LABEL>
        </td>
    </tr>

    <tr>    
        <td>    
        <INPUT 
            onclick="riskOther();"
            type="checkbox"
            id="chkRiskAssessOther"
            alt="Risk Assess Other checkbox"
            title="Risk Assess Other checkbox"
            value="Other">

        <td>
        <LABEL style="padding-left: .5em">Other:<span style="padding-left: .5 em"></span>
        <INPUT 
            type="text"
            id="txtRiskAssessOther"
            alt="Risk Assess Other"
            title="Risk Assess Other"
            maxlength="60"
            disabled="true"
            class="mcInput"
            style="width: 440 px"></LABEL>
        </td>
    </tr>
</TABLE><br>
</fieldset>
</DIV>

0 个答案:

没有答案