編號列表中的數字不會出現在IE7中的正確位置

IE7不會在正確的位置顯示編號列表的編號。我配置了relative的位置。在IE8和IE9中，數字顯示正確。編號列表中的數字不會出現在IE7中的正確位置

這是CSS：

#thumbs li p{ 
    text-align:center; 
    color: #333; 
    position: relative; 
    top: -9px; 
    right: -7px; 
    float:left; 
}

和HTML是：

<div id="thumb_caixa"> 
     <p>Clica per veure més imatges</p> 
     <ul id="thumbs"> 
      <li class='active' rel='1'><p>1</p></li> 
      <li class='active' rel='2'><p>2</p></li> 
      <li class='active' rel='3'><p>3</p></li> 
      <li class='active' rel='4'><p>4</p></li> 
     </ul> 
    </div> 
</div>

有問題的網站的網址是：http://abs.marcmorales.es/index.php?i=1&s=5&p=11

問題出在哪裏？

來源

2011-12-28 Marc Morales Valldepérez

如果我沒記錯的IE7是相對定位可怕的（也是可怕的一般） – AlanFoster 2011-12-28 16:52:13

@AlanFoster您會建議只使用[條件註釋]（http://msdn.microsoft.com/en-us/library /ms537512(v=vs.85).aspx）和一個自定義樣式表，然後呢？ – Blazemonger 2011-12-28 17:00:10

問題在技術上是IE7，但核心問題是使用CSS的方法。當你可以編寫更好的，跨瀏覽器的CSS時，不要一起破解條件註釋。 – 2011-12-28 17:03:01

你真的需要使用定位來讓p標籤居中嗎？

我想這將是好的，太：

#thumbs li p { 
    text-align:center; 
    color: #333; 
    margin: 0; 
    line-height: 20px; 
}

來源

2011-12-28 16:58:51 Armin

有幾件事情我想改變這一點：

擺脫p標籤。這是多餘的。
將#thumbs li更改爲沒有background-image，而是改爲background-color。
添加填充到#thumbs li，這樣數字居中。
添加一個color。

來源

2011-12-28 17:01:33

不同的瀏覽器以不同的方式處理列表中的填充和邊距。如果更改一個填充，則需要明確設置li和lu上的所有填充和邊距，以便保持其與跨瀏覽器的兼容性。 – 2011-12-28 17:24:50

編號列表中的數字不會出現在IE7中的正確位置

回答

相關問題