元件的位置拧在Chrome中

Question

一次，ff和ie遵守。但在这种情况下，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>

Answer 1

.suggestionsBox的保证金是多少？作为一个绝对定位的元素，我相信它会忽略它。

问题似乎是你没有为绝对定位的.suggestionsBox div设置任何上/下/左/右值;这将由浏览器决定放置它的位置。

确保您的.field类具有“position：relative;”在它上面，再添加一个“top：20px;”和“对：0px;”你的.suggestionsBox样式。如果它没有正确排列，只需调整顶部/右侧值。

Answer 2

首先，一个挑剔。

当使用带有供应商前缀的CSS3时，总是最后使用非前缀版本，否则你可能（可能）破坏某些东西：

-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;

关于你的问题：我看不到.field div的CSS，但我认为它也有一个定位上下文集（可能是relative），否则{{1} } z-index上的内容不起作用，从屏幕截图来看，确实如此。现在，你没有设置的是实际位置。 suggestionBox定位上下文应该将框放在其父级的左上角（显然，这也是父级需要定位上下文的原因）。如果您需要从父母的底部开始，还需要将absolute添加到top: 100%;属性中。

我真的看不出其他任何可能出错的地方。

Answer 3

要调试这样的东西，我会略微修改你的后端代码，这样无论输入什么输入，建议列表都会保持固定和打开状态。加载页面，然后在Chrome中打开开发人员窗格，转到“元素”选项卡，然后使用“放大镜”图标检查放错位置的元素。使用样式面板来发现导致不正确偏移的属性（不要忘记尝试元素或其父元素的绝对位置与固定位置之类的事情）。一旦你知道出了什么问题，看看“修复”在其他浏览器中是否是良性的。

Answer 4

这看起来很可能是一个JavaScript问题。建议列表很可能是以编程方式放置的（鉴于position: absolute似乎已确定），所以我会查看该代码。

如果它不是JavaScript问题，另一种可能性是绝对元素的“位置父”不同。您的CSS显示建议框绝对定位，但我们无法从您发布的代码中看到什么确定了该位置的基线（如何定义其最近位置的祖先）。

有时可以帮助绝对定位的一件事是使用top样式而不是margin-top来移动绝对定位的元素。

Answer 5

感谢@mingos和@russelluresti

我们现在解决了这个问题：

的CSS：

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

}

和字段：

.form .field { width: 50%; float: left; position:relative;}

干杯伙计，完美。我没有Safari，但它适用于我感兴趣的3，现在似乎是有效的代码，它支持适当的规则。非常感谢