ie7 li在li下而不是相同的高度

Question

the li's of my table are been placed one below the other in ie7 and not in the same line like all the other browsers.

what should I add to the li or ul definition,I have a possibly to add a different css only for ie7 if that can help.

link:

https://dl.dropbox.com/u/107452929/ie7/index.htm

Answer 1

The problem seems to be that Internet Explorer can only apply display: inline-block to elements that are ' naturally ' in-line.

The work-around, for IE, would seem to be to use float:left instead.

Although another solution seems to be using a separate conditionally-included CSS for IE:

<!--[if ie lte 7]>
    .liElementsClass,
    li {
        display: inline;
        zoom: 1;
    }
<![end if]-->

Reference:

• 'display inline-block cross-browser solutions,' at Hanami Design .
• Quirksmode, compatibility table for display: inline-block .

Answer 2

try adding display:block; to your <li>