滚动条在 CollapsiblePanelExtender 中始终可见

Question

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

我在 style 中设置 overflow:hidden; 为 Ajax Panel table 直接嵌套在其中，但是在浏览器中显示时，出现水平滚动条，Inspector 显示样式已更改为 overflow-y:hidden;。什么会导致我的样式在我的 .aspx 文件中的设计和它在浏览器中的显示方式之间发生变化？
我在 .aspx 文件中指定的 Ajax Panel 似乎被浏览器转换为 <div>。我可以接受。奇怪的是，我没有在我的 .aspx 文件中的任何地方指定的额外 <div> 出现在检查器中。这个额外的 <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>

滚动条在 CollapsiblePanelExtender 中始终可见

Scrollbars Always Visible in CollapsiblePanelExtender

html

css

asp.net

visual-web-developer-2010