css 类在自动滚动 div 中未正确显示

Question

我有一个在 jquery 模式对话框上的溢出 div。

                    <div style="overflow: auto; height: 300px; width: 780px;">
                        <fieldset>
                            <br />
                            <asp:TextBox ID="txtNote" runat="server" CssClass="notetext" Width="740px" Rows="6"
                                TextMode="MultiLine" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" />
                            <br />
                            &nbsp;
                        </fieldset>
                            <div id="notes">
                                <%
                                    Dim note As New note()
                                    Response.Write(note.shownotes(Val(txtRef.Text)))
                                %>                          
                            </div>    
                    </div>

我在溢出之间添加的一些内容看起来不错，并随着滚动条上下移动。

css 类中的其他文本不会随滚动条上下移动。好像它不是div的一部分？

它在 Firefox 中按预期工作，但在 IE 中不工作（像往常一样！）

有什么想法吗？

我在 "p class='triangle-right'> 中输入的任何内容似乎都不是 div 的一部分，而且它不会上下滚动。

.triangle-right {
    position:relative;
    padding:5px;
    /*margin:1em 0 1.5em;*/
    margin:1.5em 0em 1.5em;
    color:#000000;
    background:#ffffff; /* default background for browsers without gradient support */
    width:730px;
    border:1px solid #dddddd;
    line-height:1.4em;  
    /* css3 */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

/* creates the larger triangle */
.triangle-right:before {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-40px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    width:0;
    height:0;
    border:20px solid transparent;
    border-top-color:#aaaaaa;
}

.triangle-right:after {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-40px; /* value = - border-top-width - border-bottom-width */
    left:39px; /* controls horizontal position */
    width:0;
    height:0;
    border:21px solid transparent;
    border-top-color:#ffffff;
}  

Answer 1

我过去曾用 hack 修复过这个问题

.overflow-div * {
    position: relative;
}

但是，问题与子元素的定位有关。确保 .triangle-right 的父级具有相对位置。

我建议从头开始使用样式，并确保在添加任何其他内容之前定位有效。我经常通过这种方式发现一些晦涩难懂的问题。