为什么可用时间表、Assessor Notes 文本框和 Booking Notes 文本框与 Internet Explorer 中的其余元素不完全对齐。不过,我的页面在 Forefox 中看起来完全对齐。
我的 CSS:
<style type="text/css" media="screen">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
.LightBoxHeadingCell
{
font-family: "Arial",Verdana,Arial,Geneva,sans-serif,"MS Sans Serif";
font-style: normal;
font-weight: bold;
color: brown;
width: 150px;
font-size: 11px;
}
.LightBoxNormalCell
{
font-family: "Arial",Verdana,Arial,Geneva,sans-serif,"MS Sans Serif";
font-style: normal;
width: 150px;
font-size: 11px;
}
.AvailableTimes
{
font-size: 10px;
font-weight: bold;
width:155px;
}
</style>
我的 HTML:
<div id='AssessoronLightboxDiv' class='dhx_cal_ltext' style='height:500px;'>
<table width='630px' cellspacing='1'>
<tbody>
<tr>
<td class='LightBoxHeadingCell'>
Location :
</td>
<td class='LightBoxNormalCell'>
<select name='AssessorsLocationDropDown' id='AssessorsLocationDropDown' onchange='AssessorsLocationDropDownOnChange();' style='width:150px; background-color: #E2EFFF;'>
<option selected = '' value='Evaluators Office'>Evaluators Office</option>
<option value='Clinic'>Clinic</option>
<option value='N/A'>N/A</option>
</select>
</td>
<td class='LightBoxHeadingCell' style='display:none;'>
Event ID :
</td>
<td class='LightBoxNormalCell'>
<input type='text' id='AssessorEventID' disabled style='display:none;width:150px; background-color: #E2EFFF;'>
</td>
</tr>
<tr id='ReasonRow' style='display:none;'>
<td class='LightBoxHeadingCell'>
Reason :
</td>
<td class='LightBoxNormalCell'>
<select style='width:150px; background-color: #E2EFFF;' name='ReasonDropDown' id='ReasonDropDown'>
<option selected = '' value=''></option>
<option value='Personal Leave'>Personal Leave</option>
<option value='Sick'>Sick</option>
<option value='Stat Holiday'>Stat Holiday</option>
<option value='Training'>Training</option>
<option value='Vacation'>Vacation</option>
</select>
</td>
<td class='LightBoxHeadingCell'>
</td>
<td class='LightBoxHeadingCell'>
</td>
</tr>
<tr id='ReserveRow'>
<td class='LightBoxHeadingCell'>
Reserve Type :
</td>
<td class='LightBoxNormalCell'>
<select style='width:150px; background-color: #E2EFFF;' id='ReserveTypeDropDown' name='ReserveTypeDropDown'>
<option value=''></option>
<option selected = '' value='Regular'>Regular</option>
<option value='All Call'>All Call</option>
</select>
</td>
<td class='LightBoxHeadingCell'>
Reserved For :
</td>
<td class='LightBoxNormalCell'>
<select style='width:150px; background-color: #E2EFFF;' id='ReservedForDropDown' name='ReservedForDropDown'>
<option value=''></option>
<option selected = '' value='Any'>Any</option>
<option value='CAT Only'>CAT Only</option>
<option value='In-Person Only'>In-Person Only</option>
</select>
</td>
</tr>
<tr id='DatesRow'>
<td class='LightBoxHeadingCell' id='StartDateHeadingTD'>
Start Date :
</td>
<td id='AssessorsStartDateCalendarTD'>
<input type='text' id='AssessorsStartDateCalendar' disabled style='width:150px; background-color: #E2EFFF;'>
</td>
<td class='LightBoxHeadingCell' id='EndDateHeadingTD'>
End Date :
</td>
<td class='LightBoxNormalCell' id='AssessorsEndDateCalendarTD'>
<input type='text' id='AssessorsEndDateCalendar' style='width:150px; background-color: #E2EFFF;'>
</td>
</tr>
<tr id='AvailableTimesRow'>
<td colspan='4'>
<table width='620px' cellspacing='5' style='height: 150px;margin-top: 5px;border: 1px solid black; background-color: #E2EFFF;' id='AvailableTimesTable'>
<tbody>
<tr>
<td colspan='4' class='LightBoxHeadingCell'>
Available Times :
</td>
</tr>
<tr>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='08:00 AM - 09:00 AM;'>08:00 AM - 09:00 AM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='08:30 AM - 09:30 AM;'>08:30 AM - 09:30 AM
</td>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='09:00 AM - 10:00 AM;'>09:00 AM - 10:00 AM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='09:30 AM - 10:30 AM;'>09:30 AM - 10:30 AM
</td>
</tr>
<tr>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='10:00 AM - 11:00 AM;'>10:00 AM - 11:00 AM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='10:30 AM - 11:30 AM;'>10:30 AM - 11:30 AM
</td>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='11:00 AM - 12:00 PM;'>11:00 AM - 12:00 PM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='11:30 AM - 12:30 PM;'>11:30 AM - 12:30 PM
</td>
</tr>
<tr>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='12:00 PM - 01:00 PM;'>12:00 PM - 01:00 PM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='12:30 PM - 01:30 PM;'>12:30 PM - 01:30 PM
</td>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='01:00 PM - 02:00 PM;'>01:00 PM - 02:00 PM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='01:30 PM - 02:30 PM;'>01:30 PM - 02:30 PM
</td>
</tr>
<tr>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='02:00 PM - 03:00 PM;'>02:00 PM - 03:00 PM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='02:30 PM - 03:30 PM;'>02:30 PM - 03:30 PM
</td>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='03:00 PM - 04:00 PM;'>03:00 PM - 04:00 PM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='03:30 PM - 04:30 PM;'>03:30 PM - 04:30 PM
</td>
</tr>
<tr>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='04:00 PM - 05:00 PM;'>04:00 PM - 05:00 PM
</td>
<td class='AvailableTimes' style='color:blue;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='04:30 PM - 05:30 PM;'>04:30 PM - 05:30 PM
</td>
<td class='AvailableTimes' style='color:green;'>
<input type='checkbox' name='AvailableTimesCheckboxes' value='05:00 PM - 06:00 PM;'>05:00 PM - 06:00 PM
</td>
<td class='AvailableTimes' style='color:blue;'>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id='AssessorNotesRow'>
<td valign='top' class='LightBoxHeadingCell'>
Assessor Notes :
</td>
<td colspan='3'>
<textarea name='AssessorNotes' style='border: solid 1px #CCC; width:465px; height:50px; background-color: #E2EFFF;' id='AssessorNotes'>
</textarea>
</td>
</tr>
<tr id='AssessmentsDivRow' style='display:none;'>
<td colspan='4' class='LightBoxHeadingCell'>
<span style='font-size:11px;'>Assessments :</span>
<div id='AssessmentsGrid' style='margin-top:5px; width:615px; min-height:88px; max-height: 110px; overflow: auto;'>
</div>
</td>
</tr>
<tr id='BookingNotesRow'>
<td valign='top' class='LightBoxHeadingCell'>
Booking Notes :
</td>
<td colspan='3'>
<textarea name='BookingNotes' style='border: solid 1px #CCC; width:465px; height:50px; background-color: #E2EFFF;' id='BookingNotes'>
</textarea>
</td>
</tr>
</tbody>
</table>