0

为什么可用时间表、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'>&nbsp;
            </td>
            <td class='LightBoxHeadingCell'>
                &nbsp; 
            </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;'>
                                &nbsp; 
                            </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>

4

2 回答 2

0

在 IE10 中看起来对齐,您具体指的是哪个 IE?

于 2013-09-06T15:43:09.247 回答
0

改变

<tr id='AvailableTimesRow'>
            <td colspan='4'>
                <table width='620px'

<tr id='AvailableTimesRow'>
            <td colspan='4'>
                <table width='100%'
于 2013-09-06T15:43:16.373 回答