Question

我需要根据输入的信息扩展容器，但在IE中它会自动扩展到100％，因为容器上没有设置宽度，但在容器上设置宽度会限制内部允许的信息。转移包含的信息。容器是绝对定位的，内部的div是浮动的。

工具提示是一个下拉列表，当用户将鼠标悬停在#top_panel上时可以正常工作。 top_panel和工具提示都需要根据放置在其中的信息进行扩展，因此没有设置宽度。

#container {
    position:absolute;
    right:33px;
    top:15px;
}

#top_panel {
    position:relative;
    float:right;
    height:31px;
    background:url(../main_bg.gif) repeat-x top left;
    border: 1px solid #6a6a6a;
}

ul, li {
    margin:0;
    padding:0 5px 0 0;
    list-style:none;
    display:inline-block;
}

#panel_info {
    visibility:visible;
    margin-left:18px;
    list-style:none outside none;
    margin-top:10px;
    float:left;
}

#panel_info li {
    border-right: 1px solid #a9a9aa;
    float:left;
    margin-right:10px;
    padding-right:10px;
}

#tooltip {
    position:relative;
    float:left;
    clear:both;
    background-color:#f8f0ce;
    border-left:1px solid #6a6a6a;
    border-right:1px solid #6a6a6a;
    border-bottom:1px solid #6a6a6a;
}

#tooltip li {
    display:block;
    padding:4px;
}

#logout {
    width:82px;
    height:31px;
    position:relative;
    float:right;
    margin-left:-9px;
    margin-top:10px;
    clear:right;

}

#logout ul {
    margin-left:25px;
    margin-top:-10px;
}


<div id="container">
    <div id="top_panel">
        <span onmouseover="$('div#container').addClass('hover');" onMouseOut="$('div#container').removeClass('hover');">
            <ul id="panel_info">
                <li>Name
                    <div id="panel_arrow">
                    </div><!-- end panel_arrow -->
                </li>
                <li>
                    <span class="type">Development
                    </span>
                </li>
            </ul>
        </span><!-- end mouseover event -->
        <div id="logout">
            <div id="logoutIcon">
            </div><!-- end logoutIcon -->
            <ul>
                <li><a href="#">Logout</a></li>
            </ul>
        </div><!-- end logout -->
    </div><!-- end top_panel -->
    <div id="tooltip">
        <ul>
            <li>You are now lodded in DEV</li>
            <li><strong>Company:</strong>This is the company</li>
            <li><strong>Company ID:</strong> This is the company ID</li>
        </ul>
    </div><!-- end tooltip -->

Answer 1

我现在没有IE浏览器，所以我不太确定IE将如何处理它，但在菜单元素上尝试“白色空间”样式。 “white-space：nowrap;”例如，将阻止浏览器在太空中破线。

容器div在IE中扩展到100％，我不希望它扩展

1 个答案: