Ошибка рендеринга HTML в Chrome / Safari - выглядит нормально в Firefox

Question

У меня странная ошибка в вертикальном интервале в chrome / safari, которую я пропустил при настройке в Firefox. Кажется, какое-то правило вертикального интервала игнорируется одним или другим. Я прошел через код, но в растерянности - указание мне в правильном направлении будет высоко оценено - большое спасибо заранее.

Сайт посвящен обучению детей важности здорового питания, URL: http://ourgrowingplace.us/

Answer 1

Если вы хотите расположить div рядом друг с другом, как вы пытаетесь это сделать, используйте float:

#left {
  float: left;
  width: 100px;
}
#right {
  float: right;
  width: 50px;
}
.clear {
  clear: both;
}

Я также добавил класс .clear: убедитесь, что вы очищаете поплавки, чтобы любой последующий контент располагался под этими двумя поплавками:

<div id="left">left content</div>
<div id="right">right content</div>
<div class="clear"></div>

Кроме того, вы не можете использовать left/right/top/bottom относительно элементов позиции. Вместо этого используйте их для элемента с абсолютным позиционированием, поместив элемент position:absolute в элемент a position:relative. В этом случае вы не должны использовать это, хотя.

И старайтесь избегать использования margin, чтобы «подтолкнуть» элемент к определенной точке. Теперь вы добавляете отрицательную верхнюю маржу, чтобы она пошла вверх. Но если вы делаете это, это обычно означает, что вы должны попробовать другую настройку макета.

Answer 2

Я предлагаю вам сначала убедиться, что ваша страница соответствует спецификации, которую вы использовали в DTD, страница по указанному вами адресу не является допустимой XHTML 1.0 Transitional, а также не соответствует указанному набору символов (iso-88559-1) , Это фактически означает, что результаты рендеринга могут быть непредсказуемыми и варьироваться в зависимости от браузера.

Answer 3

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

margin:top right bottom left;