IE7李不在同一行

我正在創建一個網站的菜單，菜單是由李的。在Chrome和Firefox中，一切都很完美，但是在IE7中，這些li都在同一行，但彼此堆疊在一起。IE7李不在同一行

我做了一些研究和嘗試這些解決方案：

添加一個「浮動」屬性
添加「寬度」屬性
添加「放大」屬性設置爲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; 

    }

Apperantly問題是我使用的測試儀。我用我父親的舊laptot添加「zoom：1」和「* display：inline」解決了這個問題。對不起。

來源

2013-05-08 Dor Aharonson

如果你自己找到了答案，請以與回答這個問題作出迴應。 – 2013-05-08 08:54:12

ie7可能會在'* display：inline;'上跳躍起來，在樣式之前帶有*的樣式可能會導致樣式的其餘部分崩潰 – Dylan 2013-05-13 19:40:16

嘗試位置：相對; – Blynn 2013-05-14 14:44:32

由於問題得到了其他人的投票，我無需破解就可以回答問題，並且可以兼容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>

來源

2013-05-15 09:16:02

IE7李不在同一行

回答

相關問題