问题
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.
回答1:
The problem is that you're relying on display: table
to shrink-wrap the ul
to the width of the li
s 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 li
s 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
.
来源:https://stackoverflow.com/questions/10051601/marginauto-not-working-in-ie7