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

Question

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

Веб-сайт об обучении детям важности здорового питания, то URL является: http://ourgrowingplace.us/

Answer 1

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

margin:top right bottom left; 

Answer 2

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

Answer 3

Если вы хотите расположить дивы рядом друг с другом, как вы пытаетесь сделать, используйте 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 для «нажатия» элемента на определенное место. Теперь вы добавляете отрицательный верхний марж, чтобы заставить его подняться. Но если вы это делаете, это означает, что вы должны попробовать другую настройку макета.