滚动条在CollapsiblePanelExtender中总是可见的

Question

我有一个正在尝试设置的网页，它将显示嵌套在一个Tables中的Ajax CollapsiblePanelExtender。这张桌子的嵌套是正确的，但式样却很奇怪。我最近开始使用Chrome的检查工具，我认为它指向了正确的方向，但我很难理解为什么检查器显示的内容与我的.aspx文件中的不同。我也在Firefox上尝试过，而且行为也是相似的，所以这似乎并不是一个仅限于Chrome的bug。

1. 我在style中为表直接嵌套的Ajax Panel设置了style，但是当在浏览器中显示时，会出现一个水平滚动条，检查器显示样式已更改为overflow-y:hidden;。是什么使我的风格在.aspx文件中的设计和浏览器中显示的方式之间发生变化？
2. 我在.aspx文件中指定的Ajax .aspx似乎被浏览器转换为<div>。我可以接受。奇怪的是，检查器中似乎出现了一个额外的<div>，而我并没有在.aspx文件中指定任何位置。这个额外的<div>从何而来？

.aspx文件的最小复制：

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site_old.Master" CodeBehind="TEST.aspx.vb" Inherits="MyProject.TEST" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .MyCollapsePanelHeader
        {
            height:20px;
            font-weight: bold;
            padding:5px;
            cursor: pointer;
            vertical-align:middle;
            font-size:small;
            overflow:hidden;
        }
        .MyCollapsePanel
        {   
            width:100%;
            height:100%;
            border: 1px solid #BBBBBB;
            border-top: none;
            overflow:hidden;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
        <ContentTemplate>
            <table width="960px">
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
                                TargetControlID="PanelContent" 
                                ExpandControlID="PanelHeader" 
                                CollapseControlID="PanelHeader" 
                                Collapsed="true" 
                                TextLabelID="lblHideShow" 
                                ExpandedText="(Hide Details...)" 
                                CollapsedText="(Show Details...)" 
                                ImageControlID="img" 
                                ExpandedImage="images/minus.gif" 
                                CollapsedImage="images/plus.gif" 
                                SuppressPostBack="true" >
                        </asp:CollapsiblePanelExtender>
                        <asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
                            <table width="100%">
                                <tr>
                                    <td>
                                        <asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
                                        &nbsp;&nbsp; TITLE &nbsp;&nbsp;
                                        <asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
                            <table width="100%">
                                <tr>
                                    <td height="100%" runat="server">
                                        <asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
                                    </td>
                                    <td height="100%" runat="server">
                                        <asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
                                    </td>
                                    <td height="100%" runat="server">
                                        <asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

检查器输出的屏幕截图：

​

Answer 1

我似乎已经解决了这个问题。我认为这是因为CollapsiblePanelExtender和Panel被分离成不同的细胞。将目标Panel移动到与CollapsiblePanelExtender相同的单元格后，滚动条就消失了。

<div>元素被复制，overflow-y元素仍然存在。我还是不明白为什么这些看起来是这样的。但这似乎与滚动条显示的原因无关。因为这是我最初试图解决的问题，我想这算是一个解决方案。

Working .aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
        <ContentTemplate>
            <table width="960px">
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
                                TargetControlID="PanelContent" 
                                ExpandControlID="PanelHeader" 
                                CollapseControlID="PanelHeader" 
                                Collapsed="true" 
                                TextLabelID="lblHideShow" 
                                ExpandedText="(Hide Details...)" 
                                CollapsedText="(Show Details...)" 
                                ImageControlID="img" 
                                ExpandedImage="images/minus.gif" 
                                CollapsedImage="images/plus.gif" 
                                SuppressPostBack="true" >
                        </asp:CollapsiblePanelExtender>
                        <asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
                            <table width="100%">
                                <tr>
                                    <td>
                                        <asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
                                        &nbsp;&nbsp; TITLE &nbsp;&nbsp;
                                        <asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                        <asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
                            <table width="100%">
                                <tr>
                                    <td height="100%" runat="server">
                                        <asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
                                    </td>
                                    <td height="100%" runat="server">
                                        <asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
                                    </td>
                                    <td height="100%" runat="server">
                                        <asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>