列表背景顏色在 IE7 中搞砸了

Question

我在 Firefox 中設置了一些無序 HTML 列表及其標題的樣式：

替代文字 http://img24.imageshack.us/img24/711/screenshot001nij.png

不幸的是，在 IE7 中，它們看起來像這樣：

替代文字 http://img11.imageshack.us/img11/8343/screenshot002e.png

相關的 HTML 是

<div class="list-column">
    <h4>Types de pêche</h4>
    <ul>
        <li>Pêche en lac</li>
        <li>Pêche en Rivière</li>
    </ul>
</div>

CSS 是：

.list-column {
  float: left;
  margin-right: 20px;
  width: 20em;
}

div.list-column h4 {
  background-color: #FDD041;
  padding: 5px !important;
}

ul li {
  background-image: url(images/arrow.gif);
  background-position: 0 11px;
  background-repeat: no-repeat;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 6px;
  margin-left: -20px;
  margin-top: 2px;
  padding: 2px 0 2px 18px;
}

我懷疑包含列表的 div 向左浮動的事實可能是我問題的根源，但我不確定如何解決 IE7 中顯示不佳的問題？

更新：我嘗試向 'ul' 元素添加一個 'zoom: 1' 屬性，以查看給元素 'layout' 是否可以解決 IE 中的問題，但它沒有。

問題絕對與圓角無關。 我暫時關閉了它們，但它並沒有改變 IE 中的任何東西（除了角落的外觀）。

謝謝，唐

Answer 1

IE 和其他瀏覽器有不同的默認樣式表。

IE 通過在 <ul> 上放置“margin-left”來縮進列表項。 其他瀏覽器在 <ul> 上放置了一個'padding-left'。

因此，如果您想在所有瀏覽器中看起來都一樣，請在 <ul> 上顯式設置 'margin-left' 和 'padding-left'。 在您的情況下，您需要添加類似“margin: 0; padding: 24px” 在你的“div.list-column ul, ul.round” 規則。

（IE 中的默認列表 'margin-left' 准確地說是 '30pt'。）

Answer 2

一個常見的解決方案是設置元素的寬度。 這將使 IE 的所有內容都在該寬度的范圍內。

Answer 3

我認為這是 IE-7 自動縮進 li 最簡單的調試方法是安裝 IE-8； 切換到兼容的 ie-7 模式。 然后從工具菜單啟動開發者工具

然后，您可以檢查各個元素並檢查是否應用了隱藏的填充或邊距

Answer 4

我認為它可能取決於 ie 和 firefox 上的不同默認填充。 如果您還沒有這樣做，請嘗試在您的代碼中使用 reset.css。

Ps 在 ie8 中你有類似於 firebug 的開發者工具。 嘗試使用它們，看看您是否無法理解問題...