ie7的布局问题

Question

It looks like my website does not look good in ie7 (see screenshot below) My menu supposed to be horizontal is vertical, and facebook & twitter buttons are above each other and not next to each other. Is there a way to fix these 2 issues? Many thanks,

Answer 1

"My menu supposed to be horizontal is vertical"

This type of IE7 problem would typically occur if you were trying to make a set of <li> or <div> tags take display:inline-block -- which works in IE8 and current versions of the other browsers.

The problem is, IE7 respects display:inline-block , but only on elements that are, by default, inline such as <span> or <a> . So it just keeps them as blocks, and so they stack vertically.

Answer 2

I would try applying float: left; to both #nav > li and #nav a .

That should fix the vertical stack issue with IE7.

Answer 3

Here you go:

http://jsfiddle.net/aKPgt/

In a nutshell, change:

display:inline-block;

to

display:inline;

and add:

float:right;

Just remember, you need to REVERSE the order of your menu items in your unordered list, since you're floating RIGHT instead of LEFT.