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

我的食物菜单在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;
}

我的食物菜单可以点击这个链接

---

它的CSS源在这里

尝试添加

溢出：隐藏到css中的
dl
元素：

#menucontent dl {
  overflow: hidden;
}

首先：去掉所有的空标签！它们不是必需的。要在元素之间创建空间吗？使用
边距

针对您的问题：添加一个
clear:both到h2。所以你得到这个：

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

非常感谢你，Mateusz。我相信我的长期问题可以通过添加一个新元素来解决。谢谢，布拉姆。我也试过你的方法，效果很好。我真的很感谢你的评论。说实话，我更喜欢我的方式而不是Mateusz，因为溢出：隐藏通常被视为解决问题的“快速方法”，但最终你往往会遇到相当多的问题。至少这是我的经验。祝你的网站好运！