Question

以下是我在表格结构中的DOM元素代码。

<table >
    <tr >
        <td>
            <label>Period:</label>
        </td>
        <td>
            @Html.DropDownList("Period", new List<SelectListItem>() {
                                                     new SelectListItem{Text = "Last 7 Days", Value = "6"},
                                                     new SelectListItem{Text = "Last 15 Days", Value = "14"},
                                                     new SelectListItem{Text = "Last 30 Days", Value = "29"},
                                                     new SelectListItem{Text = "Last 90 Days", Value = "89"},
                                                     new SelectListItem{Text = "Last 180 Days", Value = "179"},
                                                     new SelectListItem{Text = "Last 365 Days", Value = "364", Selected = true},
                                                     new SelectListItem{Text = "Custom", Value = "0"}
                                                     }, new { @style="margin-right:10px;"})
        </td>
        <td>
            <input type="text" id="FromDatePicker" readonly="readonly" placeholder="From Date" 
                   style="display: none; width: 76px;min-width: 40px;line-height: 25px;margin-right: 3px;">
        </td>
        <td >
            <input type="text" id="ToDatePicker" readonly="readonly" placeholder="To Date"
                   style="display: none; width: 76px;min-width: 40px;line-height: 25px;">
        </td>
    </tr>
</table>

以下是使用div，bootstrap结构的相同元素的DOM元素结构。

<div class="row" style="padding-top:10px;">
        <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <label>Period:</label>
                </div>
                <div class="col-lg-offset-1 col-lg-8 col-md-offset-1 col-md-8  col-sm-1  col-xs-1">
                    @Html.DropDownList("Period", new List<SelectListItem>() {
                                                         new SelectListItem{Text = "Last 7 Days", Value = "6"},
                                                         new SelectListItem{Text = "Last 15 Days", Value = "14"},
                                                         new SelectListItem{Text = "Last 30 Days", Value = "29"},
                                                         new SelectListItem{Text = "Last 90 Days", Value = "89"},
                                                         new SelectListItem{Text = "Last 180 Days", Value = "179"},
                                                         new SelectListItem{Text = "Last 365 Days", Value = "364", Selected = true},
                                                         new SelectListItem{Text = "Custom", Value = "0"}
                                                         })
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
            <div class="row">
                <div class="col-lg-6  col-md-6 col-sm-6 col-xs-6">
                    <input type="text" id="FromDatePicker" readonly="readonly" placeholder="From Date" style="display: none; width: 100%; min-width:72px;  line-height: 25px;">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <input type="text" id="ToDatePicker" readonly="readonly" placeholder="To Date" style="display: none; width: 100%; min-width:72px; line-height: 25px; ">
                </div>
            </div>
        </div>

    </div>

请参阅附带两种输出格式的屏幕截图。问题仅出在Mozilla,IE。在chrome上一切正常。参考 this image 请帮忙。

Answer 1

style="vertical-align:bottom;"

做了这个伎俩

文本框allignment在浏览器上受到干扰

1 个答案: