我在使用 Accordion 时遇到一些样式问题，当屏幕呈现时， Accordion 会正确显示，但是每当更改扩展 Pane 时，最后一个 Accordion Pane 的底部就会隐藏。
Accordion 存储在母版页的内容占位符中，母版页的内容占位符位于未指定高度的 div 中。
编辑 - Accordion 似乎错误地计算了它的高度，因此在 IE 中使用开发人员工具栏时，您可以看到 Accordion 高度在选项卡更改时自动更新，这是错误的。
渲染屏幕时-
点击不同的 Pane 后 -
HTML 是 -
有问题的页面 -
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolderMain">
<h2 style="width: 836px">Manage Fields</h2>
<br />
<cc1:Accordion ID="uxAccordion" runat="server" SelectedIndex="2">
<Panes>
<cc1:AccordionPane ID="pane1" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Categories</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc1:CustomCategories ID="CustomCategories1" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="pane2" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Fields</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc2:CustomFields ID="CustomFields1" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="pane3" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Help</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc3:CustomHelp ID="CustomHelp2" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</asp:Content>
母版页-
<body class="onecol">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="bodyContainer">
<div id="headerContainer">
<uc2:UserPanel id="UserPanel1" runat="server"></uc2:UserPanel>
<uc3:PrimaryNav ID="PrimaryNav1" runat="server" />
</div>
<div id="mainContainer">
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="subNav">
<p> </p>
</div>
<div id="sideContainer">
</div>
<div id="footer">
<uc1:footer ID="Footer1" runat="server" />
</div>
</div>
</form>
</body>
CSS -
body{font: 72% arial,sans-serif;text-align:center}
div#bodyContainer{text-align:left;width:900px;margin:0 auto;background-color:#FFF;}
div#headerContainer{background:url(../images/headerbackgrad.jpg) repeat-x;height:116px;}
div#mainContainer{float:left;width:100%}
div#contentContainer{margin: 0 470px 0 0}
div#subNav{float:left;width:150px;margin-left:-700px}
div#subNav{display:none;}
div#sideContainer{float:left;width:400px;margin-left:-420px}
div#footer{clear:left;width:100%}
div#mainContainer{min-height:400px;_height:400px;}
.accordionHead
{
padding: 1px;
font-weight:bold;
background-color:#ceeffe;
border-bottom: 1px solid black;
}
.accordionContent
{
}
.accordionInnerContainer
{
width: 850px;
padding-left: 5px;
}
在此先感谢您的帮助。
最佳答案
找到解决方法，在 Accordion 上设置如下排序问题-
AutoSize="Limit"
关于html - Ajax Accordion 样式问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21781461/