我正在创建一个将在第三方软件中使用的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> (check all<br> 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>