Question

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

我有基本的分页代码：

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

我希望它全部居中，所以我在锚标签上使用内联块。很简单，剥离了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;}

问题是，NOTHING正在IE7中显示（至少是IE9的IE7模式）。我很清楚IE7具有的显示内联错误，但这些错误仅适用于默认情况下不内联的元素。我已经添加了一个缩放：1虽然是好的措施。

如果我在.pagination包装器上加了一个背景颜色，那个包装器确实会显示背景颜色，但是里面的元素没有显示！

我已经尝试了通常的IE'修复'...位置：相对，缩放：1，高度：任何元素的1％，但不是运气。

我缺少什么？！

Answer 1

在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（出于显而易见的原因，背景图片被纯色替换）

IE7中未显示的内联块元素

1 个答案: