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

时间:2010-11-16 16:05:41

标签: css html

我有一个溢出div,它位于jquery模式对话框中。

                    <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'&gt;中输入的内容看起来好像不是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;
}  

1 个答案:

答案 0 :(得分:0)

我在过去用

解决了这个问题
.overflow-div * {
    position: relative;
}

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

我建议从头开始使用样式并确保定位在添加任何其他内容之前有效。我经常以这种方式找到模糊的问题。