Html选择/下拉列表'；s列表不是'；t正下方-it'；s被滚动条偏移

在普通网页中，此下拉列表以0px的方式显示，但当它位于SharePoint网站的iFrame中时，下拉列表是偏移的，y轴偏移与页面滚动条相关：

只发生在Chrome中，不发生在IE中，无法测试FF atm，也不会发生在FF中

我已经搜索了CSS样式，但我不能缩小范围，我认为父SharePoint页面正在覆盖它，我想知道是否有其他人看到并解决了这个问题

正如我所说，它正常工作，但在iFrame中，只有在实时SharePoint服务器中，我才能得到wierd偏移量！这是一个普通的HTML选择：

    <div id="awsCertList">
            <div class="form-group">        
            <label class="control-label">AWS Certification: </label>
            <select id="awsCertChoice" name="awsCertChoice" class=""> 

                    <option value="1">AWS Cloud Practitioner</option>

                    <option value="2">AWS Alexa Skill Builder</option>

                    <option value="4">AWS Developer Associate</option>

                    <option value="6">AWS Solution Architect Professional</option>

                    <option value="7">AWS DevOps Professional</option>

                    <option value="8">AWS Security</option>

                    <option value="9">AWS Networking</option>

                    <option value="10">AWS Big Data</option>

                    <option value="11">AWS Machine Learning</option>

            </select>
            </div>
        </div>

更新2:

---

当我滚动并更改页面宽度时，会修复它。我一直在一个实时站点上使用Chrome调试器处理Javascript on scroll事件。我无法在本地复制它，即使在我保存SharePoint页面时，下拉列表也会像预期的那样直接显示在下面。

我最终使用了html、CSS和JavaScript，我发现了一个很好的参考示例

下拉菜单是用CSS模拟的，菜单项是LI标签

dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 5px 5px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

---

在滚动时，我也遇到了类似的问题，即iFrame和下拉位置。@jgabb是您特定于SharePoint的，还是我们可以比较场景？不，我的不是特定于SharePoint的，但我有一个web应用程序，其中包含指向另一个web应用程序（不同域）的iFrame。我让它工作的唯一方法是将iFrame源中的Html Select标记更改为jquery SelectMenu。然而，这只是因为我可以访问源代码来完成这项工作。似乎SharePoint可以从他们的角度对其进行更改。这是一个好主意，我将使用JavaScript动态div菜单

dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 5px 5px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}