2

所以，这是一个奇怪的...

我有基本的分页代码：

<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>

我希望它全部居中，所以我在锚标签上使用 inline-block。很简单，精简了 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 的 IE7 模式）。我很清楚 IE7 的显示内联错误，但这些错误仅适用于默认情况下不是内联的元素。无论如何，我已经添加了 zoom:1 以进行良好的衡量。

如果我在 .pagination 包装器上放置背景颜色，该包装器确实会显示背景颜色，但里面的元素没有显示！

我已经在任何元素上尝试了通常的 IE 'fixes' ...position:relative, zoom:1, height:1% ，但不是运气。

我错过了什么？！

4

1 回答 1

1

在 JSFiddle 中进行了一些实验后，我设法发现问题与这个特定规则有关

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

禁用此功能可以解决问题，但并不理想，因为您会让文本字符出现在背景图像的顶部。

有趣的是，您.next不会导致同样的问题。考虑到这一点，在您的分页控件的任一侧添加了一个&nbsp;（因此您的中心对齐不会倾斜），它似乎解决了这个问题。

<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 可在此处获得（背景图片替换为纯色，原因很明显）

于 2012-08-15T15:43:18.287 回答