[英]IE7 li not in the same row
我正在为网站创建一个菜单,菜单是由li制作的。 在Chrome和Firefox中,一切都运行良好,但在IE7中,li是在同一行,但相互叠加。
我做了一些研究并尝试了这些解决方案:
也许还有一些我不记得了。 他们没有工作。
这是我目前的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”解决了这个问题。 抱歉,添麻烦了。
由于这个问题得到了其他人的投票,我正在回答这个问题而没有黑客攻击,并且它也兼容了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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.