IE7错误流向正确

Question

当您在IE7中查看此网页时，我正在尝试解决几个问题。

（该网页在iE8和iE9中看起来很棒）

我已将单个网页上传到测试站点：

http://www.jrdesign-website.co.uk/bar_menu/bar_menu.html

页面加载后，向下滚动以查看。 您会在右侧看到价格。 重复的小句点应与价格和食物说明保持一致。

任何建议将不胜感激

Answer 1

因此，您的代码在其上带有带下划线的点作为重复的背景，并且在其中包含一个包装器div，该包装器div浮动着食品名称，并嵌套在一个.bar_font_bold_med类中，该类为“ float：right”。

两种可能的解决方案。 1 \\为什么没有价格，即本身拥有价格。 这将解决定位在正确目标上的问题。 它还将允许您使用价格的中间或顶部等来独立调整其相对于食品的垂直位置。 还可以使用CSS提供虚线下划线。 例如，考虑在左侧使用边框样式。 border-bottom: 5px dotted #fff

如何附加样式取决于您自己。 最好是在相关s上使用CSS类名，即

<td align="left" width="565" height="xxx" 
    bgcolor="#000000" background="images/yellow_dot.jpg"

...变成...

<td class="foodItemCol" height="xxx">

...并且您拥有CSS样式

.foodItemCol {
    border-bottom: 5px dotted #ffffff;
    width: 565px;
    background-color: #000000;
}

或者，如果您同意我的建议，请使用此CSS选择器，这意味着您不必费心添加类名

#bar_menu_text table td {
    border-bottom: 5px dotted #ffffff;
    width: 565px;
    background-color: #000000;
}

#bar_menu_text table td + td {
    border-bottom: none;
    width: auto;
    background-color: #000000;
}

第二个样式选择器说的是第二个或随后的同级出现在第一个之后的位置，然后覆盖上面的“ #bar_menu_text table td”规则中应用的样式，即，price列没有带下划线的下划线。 PS您已经使用WYSIWYG编辑器为该页面生成代码了吗？ 我修改了我的答案，以免我想起您不习惯手动编写HTML / CSS。 PPS根本不需要z-index：5或任何z-index ...它们仅在将元素应用于position：relative或position：absolute等时才有用。