html - 滚动条在 CollapsiblePanelExtender 中始终可见

Question

我有一个要设置的网页，它将显示一些 Ajax Tables嵌套在 CollapsiblePanelExtender 中.表格嵌套正确，但样式表现异常。我最近开始使用 Chrome 的 Inspector 工具，我认为它为我指明了正确的方向，但我无法理解为什么 Inspector 显示的内容与我的 .aspx 文件中的内容不同。我也在 Firefox 中尝试过，行为相似，所以这似乎不是 Chrome 独有的错误。

1. 我设置了 overflow:hidden;在style对于 Ajax Panel表格是直接嵌套的，但是在浏览器中显示时，会出现水平滚动条，Inspector 显示样式已更改为 overflow-y:hidden; .什么会导致我的样式在我的 .aspx 文件中的设计和它在浏览器中的显示方式之间发生变化？

2. 看来是 Ajax Panel我在我的 .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>

Inspector 输出的屏幕截图:

Answer 1

我似乎已经解决了这个问题。我相信这是因为 CollapsiblePanelExtender和 Panel它被靶向分离到不同的细胞中。移动目标后Panel进入与 CollapsiblePanelExtender 相同的单元格，滚动条消失了。

<div>正在复制元素并且 overflow-y元素仍然存在。我仍然不明白为什么这些会以它们的方式出现。但这似乎与滚动条显示的原因无关。由于这是我最初试图解决的问题，我想这算作一个解决方案。

工作.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>