Chrome/safari中的HTML渲染错误-在firefox中看起来正常

Question

我在chrome/safari中遇到了一个奇怪的垂直间距bug，我在firefox中设置它的时候遗漏了它。似乎一些垂直间距规则被其中之一忽略了。我已经看过了代码，但不知所措--为我指明正确的方向将不胜感激--非常感谢。

这个网站是关于教育孩子们健康饮食的重要性，网址是：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元素放在position:relative元素中，可以在绝对定位的元素上使用它们。在这种情况下，您不应该使用这个。

并尽量避免使用margin将元素“推”到某个位置。现在，您添加了一个负的上边距来使其上升。但如果你这样做，通常意味着你应该尝试另一个布局设置。

Answer 2

我建议您首先确保您的页面符合您在DTD中使用的规范，您指定的地址上的页面不是有效的XHTML1.0过渡，也不匹配指定的字符集(iso-88559-1)。这实际上意味着呈现结果可能是不可预测的，并且在不同的浏览器中会有所不同。

Answer 3

我不知道你在说什么垂直间距规则，但是设置元素间距的正确方法是通过页边距。

margin:top right bottom left;