影响 AJAX 控件的 CSS

Question

在尝试弄清楚为什么这会影响 AJAX 控件时遇到问题。当我删除 CSS 文件时，它会正确显示。

CSS 文件

.tdMain
{
    width:452px;
    font-family:Arial;
    font:bold,small;
}

.tdInput
{
    width:324px;
    font-family:Arial;
}

.center
{
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

table
{
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    width:752px;
}

ASPX

<tr>
    <td class="tdMain">Date:</td>
    <td>
       <asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
       <asp:ImageButton ID="imgPopupDate" ImageUrl="~/Images/calendar.png" ImageAlign="Bottom" runat="server" />
        <ajaxToolkit:CalendarExtender ID="cDate" PopupButtonID="imgPopupDate" runat="server" TargetControlID="txtDate" Format="MM/dd/yyyy"/>
     </td>
</tr>

Answer 1

CalendarExtender 生成一个表。您将页面上的所有表格设置为 752px 的宽度，包括由 CalendarExtender 生成的表格。

table
{
    ...
    width:752px;
}

您需要更具体地使用您的 css 选择器。为您希望设置宽度的表格提供一个 class 或 id 并将其用作选择器。

table.myTable
{
    ...
    width:752px;
}

或

table#myTable
{
    ...
    width:752px;
}