Question

我的食物菜单在Firefox和IE中完美运行，但在Chrome上完全没有。 dt标记与其他dd标记重叠。我试图从问题列表中搜索，但无法找到正确的搜索列表。我多次试图玩浮动和溢出，但一直无法解决这个问题。

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

#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;
}

Answer 2

尝试将overflow: hidden;添加到css中的dl元素：

#menucontent dl {
  overflow: hidden;
}

CSS - 我的食物菜单适用于Firefox和IE，但不适用于Chrome

2 个答案: