IE7 中不显示内联块元素答案

【问题标题】：inline-block elements not showing in IE7IE7 中不显示内联块元素
【发布时间】：2012-08-15 23:43:18
【问题描述】：

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

我有基本的分页代码：

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

问题是，IE7 中没有显示任何内容（至少 IE9 的 IE7 模式）。我很清楚 IE7 的显示内联错误，但这些错误仅适用于默认情况下不是内联的元素。无论如何，我还是添加了 zoom:1。

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

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

我错过了什么？！

【问题讨论】：

您可以尝试浮动分页超链接，而不是使用内联块。这在 IE7 中可能更容易处理。
当然浮动更安全，但要使所有内容居中，则需要一个额外的 div 和浮动内容 left:50%、left:-50%、overflow hidden 和所有爵士乐。如果可能的话，宁愿保持简单！

标签： internet-explorer-7 css

【解决方案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 available here（背景图片替换为纯色，原因很明显）

【讨论】：

哇，很好的解决方案 - 谁会想到！谢谢:)