CSS: вопрос заполнения.Нужна помощь пожалуйста

Question

У меня возникает странная проблема с интервалом CSS в Chrome (но не в Firefox и / или IE)

Мой сайт здесь.

Вертикальный интервалв Firefox между " Поиск недвижимости " (тег H2) и полем ввода формы для " Сан-Франциско, Калифорния " (# тег ввода поля города) идеально, но вChrome, Chrome применяет больше / больше вертикальных интервалов, чем нужно.

Чтобы помочь, я прикрепил скриншот.Красная линия представляет дополнительный интервал, который добавляет Chrome, а Firefox / IE - нет.

Любые идеи о том, почему Chrome применяет больший интервал, чем Firefox и IE.

И как решить эту проблему.

Заранее спасибо

ОБНОВЛЕНИЕ

Я также использую "таблицу стилей сброса" для стандартизации по всембраузеры - интервал H2 и т. д. Его можно найти в моем HTML-документе, указанном выше, но проблема все еще не решена.

Answer 1

Согласно Web Inspector, в Chrome ваш входной тег имеет верхнее и нижнее поле размером 2 пикселя. Тем не менее, Firebug не показывает поля для этого же входа, в Firefox. Используйте следующее в вашем CSS:

#city-field {margin:0}

Редактировать: Дополнительный интервал вызывается, потому что на входе установлено отображение: inline-block. Если вы измените его на display: block, вы заметите, что пространство исчезает. Попробуйте использовать float и display: block, чтобы получить содержимое внутри строки.

Answer 2

Попробуйте установить height значение #city-field, скажем, на 20 пикселей.

однако .

Answer 3

Использовать таблицу стилей сброса.

Различные браузеры по-разному интерпретируют правила CSS для таких тегов, как H1, H2, UL, LI и т. Д. К ним относятся отступы и размер шрифта по умолчанию. Таблица стилей сброса принимает все эти значения и удаляет значения по умолчанию, чтобы вы могли при желании подставлять свои собственные значения.

Answer 4

Я думаю, что высота строки - виновник. Попробуйте установить высоту линии h2 где-то около 13 до 15 пикселей. По умолчанию оно установлено на нормальное. В соответствии с W3C , line-height: normal "Указывает агентам пользователя устанавливать для используемого значения" разумное "значение на основе шрифта элемента." Firefox и Chrome могут устанавливать разные «разумные» значения, поскольку они построены на совершенно разных движках рендеринга.