爲什麼這個無序列表在IE7中的格式不同？

Question

我即將把事情好看的IE8，FF和Safari更好，但IE7仍然在我拋出曲線球...

請看看這個頁面，導航欄下面向下滾動： http://rattletree.com/instruments.php

在FF vs IE7中查看時，它應該變得很明顯。出於某種原因，列表的格式正在推動頁面上的列表項... 任何提示？

<ul class="instrument"> 

     <li class="imagebox"><img src="/images/stuff.jpg" width="247" height="228" alt="Matepe" /></li> 
     <li class="textbox"><h3>Matepe</h3><p>This text should be to the right of the image but drops below the image in IE7</p></li> 
</ul> 

CSS：

ul.instrument { 
    text-align:left; 
    display:inline-block; 

} 

ul.instrument li { 
    list-style-type: none; 
    display:inline-block; 

} 

li.imagebox { 
display:inline;  
margin:20px 0; 
padding:0px; 
vertical-align:top; 

} 

li.imagebox img{ 
border: solid black 1px; 
} 

li.textbox { 
display:inline;  
} 

li.textbox p{ 
margin:10px; 
    width:340px; 
    display:inline-block; 
} 

Answer 1

基本上這條線ul.instrument li {是overiding li.imagebox etc.

所以你可以做的是這樣的：

CSS：

ul.instrument { 
    text-align:left; 
    display:inline-block; 
} 
ul.instrument li { 
    list-style-type: none; 
    display:inline-block; 
} 
ul.instrument li.imagebox { 
    display:inline;  
    margin:20px 0; 
    padding:0px; 
    vertical-align:top; 
} 
ul.instrument li.imagebox img{ 
    border: solid black 1px; 
} 
ul.instrument li.textbox { 
    display:inline;  
} 
ul.instrument li.textbox p{ 
    margin:10px; 
    width:340px; 
    display:inline-block; 
} 

基本上我做什麼，而不是宣佈li.imagebox我用ul.instrument li.imagebox ，使其不受本聲明將在此改變ul.instrument li

希望這有助於:)

編輯，這裏的另一個走，但這種方法不同，它採用浮動

CSS：

ul, li, h3, p { margin: 0; padding: 0 } 
ul, li { list-style: none } 
ul.instrument { overflow: hidden} 
ul.instrument li, ul.instrument li img { float: left; } 
ul.instrument li.imagebox { margin:20px 0; } 
ul.instrument li.imagebox img { border: 1px solid black } 
ul.instrument li.textbox p { margin: 10px; width: 340px } 

但在所有的瀏覽器這一個工程，我公司承諾：d。基本上，前兩行重置您使用的元素，以便它在所有瀏覽器中看起來都一樣。