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等時才有用。