Question

我正在为网站创建一个菜单，菜单由li组成。在Chrome和Firefox中，一切都运行良好，但在IE7中，li是在同一行，但相互叠加。

我做了一些研究并尝试了这些解决方案：

添加“浮动”属性
添加“宽度”属性
将“缩放”属性设置为1
将“white-space：nowrap”添加到ul

也许还有一些我不记得了。他们没有工作。

这是我目前的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>

这是我的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;

    }

显然问题出在我使用的测试人员身上。我用我爸爸的旧laptot添加“zoom：1”和“* display：inline”解决了这个问题。抱歉有问题。

Answer 1

由于这个问题得到了其他人的投票，我正在回答这个问题而没有黑客攻击，并且它也兼容了crossbrowser。祝你好运，度过愉快的一天

<!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 个答案: