保证金：自动不在IE7中工作 [英] margin:auto not working in IE7

问题描述

我在我的网站上有一个分页控件，它的容器元素设置为margin：auto，以便分页控件在元素中居中。它在除IE7以外的所有浏览器都很好用。事实上，我刚刚意识到我的网站有几个问题与IE7，我试图通过他们所有。然而，我一直坚持这一点。

看看 F12 并在菜单栏中将浏览器模式设置为IE7。将其与任何其他浏览器/版本中的相同页面进行比较。

任何人都可以告诉我为什么这是基于我使用的CSS / HTML发生的？我一直在尝试一些看起来像是几个小时的事情，而我并没有真正想到它。

解决方案

问题是您依靠 display：table 将 ul 缩小为<$ c $的宽度c> li s在里面。不幸的是，IE7不支持 display：table a>

切换到 display：inline-block 是解决这个问题的一种方法。

previous_next_container_forum ul.list_paging ，删除 display：table 并添加：

display：inline-block;
* display：inline;
zoom：1;


现在 ul 其中 li s，没有使用 display：table 。

要真正使其居中，您需要将 text-align：center 添加到父元素，例如 .previous_next_container_forum 。

I have a paging control on my site that has it's container element set to margin:auto so that the pager control are centered within the element. It works great on all browsers except for IE7. In fact, I just realized my site has several issues with IE7 and I'm trying to work through them all. However, I've been stuck on this one for some time.

Take a look at this page.

(I know there are other IE7 issues on this page, focusing on the pager controls first). If you use IE9, you can hit F12 and set the "Browser Mode" to IE7 in the menu bar. Compare it to the same page in any other browser/version.

Can anyone tell me specifically why this is happening based on the CSS/HTML I'm using? I've been trying things for what seems like hours and I'm not really getting anywhere with it.

解决方案

The problem is that you're relying on display: table to shrink-wrap the ul to the width of the lis inside it. Unfortunately, display: table is not supported in IE7.

Switching to display: inline-block is one way to fix this.

On previous_next_container_forum ul.list_paging, remove display: table and add:

display: inline-block;
*display: inline;
zoom: 1;

The ul is now exactly as wide as the lis inside it, without the use of display: table.

To actually make it centered, you need to add text-align: center to a parent element, such as .previous_next_container_forum.

这篇关于保证金：自动不在IE7中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！