IE7 li不在同一行

Question

I'm creating a menu for a site and the menu is made of li's. 我正在为网站创建一个菜单，菜单是由li制作的。 In Chrome and Firefox everything works perfectly, but in IE7 the li's are in the same row, but stacked up in each other. 在Chrome和Firefox中，一切都运行良好，但在IE7中，li是在同一行，但相互叠加。

I did some research and tried these solutions: 我做了一些研究并尝试了这些解决方案：

Adding a "Float" property 添加“浮动”属性
Adding a "Width" property 添加“宽度”属性
Adding a "Zoom" property set to 1 添加“缩放”属性设置为1
Adding "white-space: nowrap" to the ul 在ul中添加“white-space：nowrap”

And maybe some more that I don't remember. 也许还有一些我不记得了。 Non of them worked. 他们没有工作。

This is my html currently: 这是我目前的html：

<ul id="menu">
                    <li><a href="#">Home</a></li>
                    <li>
                        <a href="#">1</a>
                        <ul id="submenu">
                            <li>a</li>
                            <li>b</li>
                            <li>c</li>
                        </ul>
                    </li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>

And this is my CSS: 这是我的CSS：

#menu li {
        width: 150px;
        height: 44px;
        background: url('menu.png') repeat-x;
        display:-moz-inline-stack;
        display:inline-block;
        zoom:1;
        *display:inline;
        margin-left: -3px;
        border-left: 1px solid silver;
        float: right;

    }

Apperantly the problem was the tester I used. 显然问题是我使用的测试仪。 I used my dad's old laptot adding "zoom: 1" and "*display: inline" solved the problem. 我用我爸爸的旧laptot添加“zoom：1”和“* display：inline”解决了这个问题。 Sorry for the trouble. 抱歉，添麻烦了。

Answer 1

Since the question got voted for by others I am answering it without a hack and have it also crossbrowser compatible. 由于这个问题得到了其他人的投票，我正在回答这个问题而没有黑客攻击，并且它也兼容了crossbrowser。 Good luck and have a nice day 祝你好运，祝你有个美好的一天

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
    #menu{
        float:right;
    }
    #menu li {
        width: 150px;
        height: 44px;
        border-left: 1px solid silver;
        float: left;
    }
    #submenu {
        margin:0;
    }
</style>
</head>
<body>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">1</a>
        <ul id="submenu">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

IE7 li不在同一行

问题描述

1 个解决方案

解决方案1
0 2013-05-15 09:16:02

IE7 li不在同一行

问题描述

1 个解决方案

解决方案1 0 2013-05-15 09:16:02

解决方案1
0 2013-05-15 09:16:02