положение элемента ввинчивается в Chrome

Question

На этот раз, ff и т. Е. Соответствуют. Но в этом случае хром не нравится.

У нас есть поле с присоединенным автозаполнением, которое появляется после 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: относительный;" затем добавьте «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;

Что касается вашей проблемы: я не вижу CSS для .field div, но я предполагаю, что у него также установлен контекст позиционирования (вероятно, relative), в противном случае z-index на suggestionBox не будет не работает, и, судя по скриншотам, это так. Теперь то, что вы не установили, это фактическая позиция. Контекст позиционирования absolute должен поместить прямоугольник в верхний левый угол своего родителя (очевидно, поэтому родителю также нужен контекст позиционирования). Если вам нужно, чтобы он начинался с нижнего предка родителя, вам также нужно добавить top: 100%; в ваши .suggestionBox свойства.

Я действительно не вижу ничего другого, что может быть здесь не так.

Answer 3

Чтобы отладить что-то подобное, я бы немного изменил ваш внутренний код, чтобы список предложений оставался фиксированным и открытым, независимо от вводимого ввода. Загрузите страницу, затем откройте панель разработчика в Chrome, перейдите на вкладку «Элементы» и используйте значок «увеличительное стекло» для проверки неуместных элементов. Поиграйте с панелью стилей, чтобы узнать, какие атрибуты вызывают неправильное смещение (не забудьте попробовать такие вещи, как абсолютная или фиксированная позиция элемента или его родителей). Как только вы поймете, где что-то идет не так, посмотрите, является ли «исправление» доброкачественным в других браузерах.

Answer 4

Благодаря @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-х областях, которые меня интересовали, и, кажется, сейчас является действующим кодом, который поддерживает надлежащие правила.Большое спасибо

Answer 5

Похоже, это проблема JavaScript.Список предложений, скорее всего, размещен программно (учитывая, что position: absolute кажется верным), поэтому я посмотрел бы на этот код.

Если это не проблема JavaScript, другая возможность заключается в том, что "родитель позиции"«Абсолютный элемент отличается.Ваш CSS показывает, что поле для предложений позиционировано абсолютно, но мы не можем видеть из вашего размещенного кода, что устанавливает базовую линию для позиции (как определяется ее ближайший предок).

Одна вещь, которая иногда может помочь сабсолютное позиционирование - это использование стиля top вместо margin-top для перемещения вашего абсолютно позиционированного элемента вниз.