下拉宽度修复，通过 JS 计算

drop down width-fix that is calculated via JS

本文关键字：通过 JS 计算      更新时间：2023-09-26


我正在修复通过 js 出现的下拉宽度问题。

下拉菜单（子ul）宽度缩短了一些px。我找不到现有的 js 代码，所以我计算了 ul 宽度并对其进行了一些像素的添加。

问题在于 IE 浏览器内联宽度以 em 形式出现，而在 Firefox 中以 px 形式出现。 这就是为什么两个浏览器中的宽度不同。

这是我的代码：

<script>
j$("#container .sf-menu").each(function () {
            j$(".menu-list").each(function () {
                j$i = j$(this).width();
                j$(this).width(j$i + 6)
            });
        });
</script>

当我删除我的 js 代码时，默认情况下它的内联宽度以 em 为单位。

请让我知道如何在所有浏览器中以 em 制作宽度大小。

<div id="container">
           <ul class="sf-menu sf-js-enabled sf-shadow">
           <li class="selected"><a href="#" id="ctl02_ChapterButtonGroupLoopedlbtn1" onclick="return false;" class="sf-with-ul" style="padding-right: 4.5em;">Looping</a>
           <ul class="menu-list" style="float: none;">
           <li style="white-space: normal; float: left; width: 100%;">
           <input type="submit" class="FormButton loop" id="ctl02_8b81504d-2351-430d-9b68-eba2e0e6bd38" value="chap1" name="ctl02$8b81504d-2351-430d-9b68-eba2e0e6bd38" >
           </li>
           </ul>
           </li>
           </ul>
           </div>

<style>
#container {
    position: relative;
}
.sf-menu li ul {
    background: url("/a/images/drop-bg.png") repeat-x scroll 0 0 #D8D8D8;
    border: 1px solid #B0B0B0;
    margin: 0;
    padding: 0;
}
.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em;
}
.sf-menu, .sf-menu * {
    font: 11px Verdana,Geneva,sans-serif;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    right: 0;
    top: 0;
}
.sf-menu li li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    text-align: left;
}
.sf-menu ul li {
    margin: 0;
    padding: 0;
    position: relative;
    right: 0;
    width: 100%;
}
.chapter-title .sf-menu li {
    right: 0;
}
.chapter-title li.selected, .chapter-title li.selected:hover {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #FFFFFF;
    border-radius: 3px 3px 3px 3px;
}
.chapter-title li.selected .sf-with-ul, .chapter-title li.selected .sf-with-ul {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.chapter-title li.selected .sf-with-ul, .chapter-title li.selected .sf-with-ul {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.chapter-title li.selected a {
    color: #FFFFFF;
}
.chapter-title .sf-menu a {
    padding-left: 5px;
    top: -2px;
}
</style>

我成功地在所有浏览器中制作了"px"中的宽度，但在IE-7中宽度与其他浏览器不同。
在所有浏览器中，通过js显示为"283px"，但在IE-7中，它是"271px"。我无法找出代码的问题：

<script>
j$("#container").find("#ctl02_ChapterButtonGroupLoopedlbtn1").next("ul").addClass("menu-list");
        j$("#container .sf-menu").each(function () {
            j$(".menu-list").each(function () {
                j$i = j$(this).width();
                j$(this).width(j$i + 6 + "px")
            });
        }); 
</script>
相关文章：