CSS - 我的食物菜单在 Firefox 和 IE 中运行良好，但在 Chrome 上运行不佳

Question

我的食物菜单在 Firefox 和 IE 中完美运行，但在 Chrome 上完全不运行。 dt 标签与其他 dd 标签重叠。我试图从问题列表中搜索，但找不到正确的问题。我多次尝试使用 float 和 overflow，但一直无法解决这个问题。

您的建议将不胜感激。我真的不想再挠头了，因为我已经这样做了几个月了。

#menucontent dt {
float: left;
padding-right: 5px;
font-weight: bold;
}

#menucontent dd.price {
float: right;
color: #E1DEDE;
}

#menucontent dd.ingredients {
float: left;
width: 100%;
padding: 0px 0px 5px 0px;
color: #FAD98A;
}

可以从这个链接点击我的食物菜单 https://dl.dropbox.com/u/13748701/dinner.html

它的 CSS 源在这里 https://dl.dropbox.com/u/13748701/style.css

Answer 1

首先:去掉所有空的<p> -标签!它们不是必需的。想要在元素之间创建空间？使用 margin !

对于您的问题:添加 clear: both;到 h2。所以你得到这个:

h2 {
  padding: 3px 15px 0px 0px;
  font-weight: normal;
  font-size: 20px;
  color: #F7E4B5;
  clear: both;
}