Question

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

我在overflow:hidden;中为表格直接嵌套的Ajax style设置了Panel，但是当在浏览器中显示时，会出现一个水平滚动条，并且Inspector显示样式已更改为overflow-y:hidden;。什么可能导致我的样式在我的.aspx文件中的设计与它在浏览器中的显示方式之间发生变化？
我在.aspx文件中指定的Ajax Panel似乎被浏览器转换为<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元素仍然存在。我仍然不明白为什么这些出现的方式。但它似乎与滚动条显示的原因无关。由于这是我最初试图修复的问题，我想这算作一种解决方案。

正在工作.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中始终可见

1 个答案: