日历扩展程序无法正确显示

Question

我在我的页面上使用了ajax日历扩展程序控件，虽然扩展程序块正确显示，但它的内容却没有：

以下是我用于将其写入页面的代码：

<table class="tblForm">
    <tr>
        <td valign="top">
            <asp:TextBox runat="server" ID="txtPickupDate" AutoPostBack="true"></asp:TextBox>
            <aj:CalendarExtender runat="server" ID="calPickup" TargetControlID="txtPickupDate" Format="yyyy-MM-dd">
            </aj:CalendarExtender>
        </td>
    </tr>
</table>

没有任何样式规则直接应用于CalendarExtender，但我确实有这个css可能是相关的：

.tblForm
{
    display: block;
}
.tblForm td
{
    width: 245px;
    float: left;
}

有没有人见过这个？有谁知道它可能是什么？

提前感谢您的帮助！

修改
我已经尝试删除浮动，虽然它修复了CalendarExtender，但它也会移动容器表中的每个单元格不对齐。我也尝试将clear: both;设置为CalendarExtender，但这会让它的背景消失。

Answer 1

好的，我已经弄明白了：）

表格单元格的CSS出现了问题。修改单元格的宽度也修改了由Calender Extender写入的表格内单元格的宽度。

为了解决这个问题，我删除了表格中的所有浮点数及其子元素，并声明了一个新类来设置宽度，然后从包含日历的单元格中省略该宽度：

.tblForm 
{
    display: block;
}
.tblForm tr.wider td, tblForm .wider
{
    width: 245px;
}

Answer 2

我在ListView对象中遇到类似日历扩展器的问题。由于造型问题，它总是在周五和周六切断。我最终通过包装我的日历扩展器（包括文本框和图像）来绕过它，并为它们分配一个覆盖我的表的CSS的样式。

#calendarContainerOverride table
{
    width:0px;
    height:0px;
}

#calendarContainerOverride table tr td
{
    padding:0;
    margin:0;
}

然后在这里应用id：

<tr id="calendarContainerOverride">
  <td style="padding-top:10px">    
    <asp:TextBox ID="txtStart" runat="server" %>' />
    <asp:CalendarExtender ID="extender" runat="server" Enabled="True" TargetControlID="txtStart" PopupButtonID="imgCalendarStart" />
    <asp:Image ID="imgCalendarStart" ImageUrl="~/Images/Calendar.png" runat="server"/>
  </td>
</td>

使用此方法，您无需更改所有表格的样式，只需专注于讨厌的日历。