IE7 li不在同一行
[英]IE7 li not in the same row
問題描述
我正在為網站創建一個菜單，菜單是由li制作的。 在Chrome和Firefox中，一切都運行良好，但在IE7中，li是在同一行，但相互疊加。
我做了一些研究並嘗試了這些解決方案：
- 添加“浮動”屬性
- 添加“寬度”屬性
- 添加“縮放”屬性設置為1
- 在ul中添加“white-space：nowrap”
也許還有一些我不記得了。 他們沒有工作。
這是我目前的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”解決了這個問題。 抱歉，添麻煩了。
1 個解決方案
解決方案1
0 2013-05-15 09:16:02
由於這個問題得到了其他人的投票，我正在回答這個問題而沒有黑客攻擊，並且它也兼容了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在li下而不是相同的高度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.