css - 元素在Chrome中的位置

ff，即遵守。但是在这种情况下，chrome不喜欢它。

我们有一个字段，附加了自动建议字段，该字段显示在x个字母之后。由于其数据库驱动，因此无法真正将演示放在小提琴上。
但是这里是CSS

.suggestionsBox {
    z-index: 2;
    position: absolute;
    margin: 70px 0px 0px 146px;
    width: 207px;
    background-color: #ffffff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cccccc;
    color: #000;
    box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
    -webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
    -moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}

.suggestionList {
    margin: 0px;
    padding: 0px;
}

.suggestionList li {
    list-style: none;
    margin: 3px 3px 3px 3px;
    padding: 3px;
    cursor: pointer;
}

.suggestionList li:hover {
    background-color: #ffffcc;
}

和ff截屏，即镀铬外观。任何建议，我通常对CSS都很好。但这让我难过。


根据要求，这里是此元素的html：

<div class="field"><label for="propertysuburb">Suburb </label> <input name="propertysuburb" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" size="50" type="text" class="medium" /></div>
                        <div class="suggestionsBox" id="suggestions" style="display: none;">
                            <div class="suggestionList" id="autoSuggestionsList">
                                &nbsp;
                            </div>
                        </div>

最佳答案

.suggestionsBox的边距是什么？作为绝对定位的元素，我相信它只会忽略这一点。

问题似乎是您没有为绝对定位的.suggestionsBox div设置任何上/下/左/右值。这将其留给浏览器来确定放置位置。

确保您的.field类具有“ position：relative;”在其上，然后添加“ top：20px;”和“正确：0px；”您的.suggestionsBox样式。如果排列不正确，只需调整顶部/右侧的值即可。