inline-block的元素在IE7中不顯示

我有基本的分頁代碼：

<div class="pagination"> 
    <a href="#" class="prev">&lt;</a> <a href="#">1</a> <a class="current">2</a> <a href="#">3</a> <a href="#" class="next">&gt;</a> 
</div>

而且我想這一切的中心，所以我m在錨標籤上使用內聯塊。簡單的說，剝離CSS代碼：

.pagination{text-align:center; margin-bottom:20px;} 
.pagination > a{display:inline-block; vertical-align:middle; margin:0 2px 0 1px;} 
.ie7 .pagination > a{zoom:1;} 
.pagination .next, 
.pagination .prev{width:26px; height:38px; text-indent:-9999px; overflow:hidden; 
background:url(../images/page-arrows.png) no-repeat;} 
.pagination a{width:37px; height:31px; line-height:32px; font-size:15px; font-weight:bold; color:#7e7e7e; 
background:url(../images/page-numbers.png) left top no-repeat;}

問題是，什麼都沒有顯示在IE7（至少IE9的IE9模式）。我非常瞭解IE7具有的顯示內聯錯誤，但這些錯誤僅適用於默認情況下不是內聯的元素。無論如何，我已經在縮放中添加了1個，儘管這是很好的措施。

如果我在.pagination包裝器上放置了一個背景顏色，那個包裝器的確會顯示背景顏色，但是裏面的元素沒有顯示！

我試過平常的IE'fixes'... position：relative，zoom：1，height：1％在任何元素上，但不是運氣。

我錯過了什麼？

來源

2012-08-15 Andyweb

你可以用浮動的分頁鏈接，而不是使用inline-block的實驗。這在IE7中可能更容易處理。 – 2012-08-15 16:12:09

當然，浮游物更安全，但將其集中在一起將需要額外的div和剩餘浮動物：50％，剩下：-50％，以及隱藏溢出和所有爵士樂。儘可能保持簡單！ – Andyweb 2012-08-15 16:49:49

中的jsfiddle一些嘗試後，我已經成功地發現，這個問題涉及到這個特殊的規則

.pagination .prev {text-indent:-9999px; }

禁用此修復該問題，但不是很理想，你會再有性格特徵的文字出現在頂部你的背景圖像。

有趣的是，您的.next不會導致相同的問題。考慮到這一點，在分頁控制的兩側添加了 （這樣您的中心對齊dosnt就會傾斜），並且它似乎可以解決問題。

<div class="pagination"> 
    &nbsp; 
    <a href="#" class="prev">&lt;</a> <a href="#">1</a> <a class="current">2</a> <a href="#">3</a> <a href="#" class="next">&gt;</a> 
    &nbsp; 
</div>

JSFiddle available here（純色更換原因很明顯的背景圖片）

來源

2012-08-15 15:43:18

哇，好的一個算出來 - 誰會想到！謝謝：） – Andyweb 2012-08-15 16:47:06

inline-block的元素在IE7中不顯示

回答

相關問題