Css 为什么IE7中的无序列表格式不同？

在IE8、FF和Safari中，我更擅长让东西看起来不错，但IE7仍然向我扔曲线球

请查看此页面并在导航栏下方向下滚动：

在FF和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> 

---

基本上，这一行

ul.instrument li{

超出了

li.imagebox等。

所以你能做的是：

CSS:

基本上我是这样做的，而不是声明

li.imagebox

我使用了

ul.instrument li.imagebox

这样它就不会被本声明覆盖

ul.instrument li

希望这有帮助：）

编辑，这里有另一种方法，但这种方法不同，它使用float

CSS:

---

但这一行适用于所有浏览器，我保证：D.基本上前两行重置了您使用的元素，使其在所有浏览器中看起来都一样。

基本上这一行

ul.instrument li{

覆盖了

li.imagebox等。

所以你能做的是：

CSS:

基本上我是这样做的，而不是声明

li.imagebox

我使用了

ul.instrument li.imagebox

这样它就不会被本声明覆盖

ul.instrument li

希望这有帮助：）

编辑，这里有另一种方法，但这种方法不同，它使用float

CSS:

---

但这一条适用于所有浏览器，我保证：D.基本上，前两行会重置您使用的元素，使其在所有浏览器中看起来都一样。

在FF和IE7中看起来都一样。真的吗？看起来一样吗？我正在使用IE8和开发工具切换到IE7并更改格式…文本应该在图片的右侧，但不会这里的IE7低…使用IE8在IE7模式下查看与实际使用IE7不同。我注意到了很多差异。文本是在图像的右侧还是下方？这就是我看到的：在FF和IE7中看起来相同。真的吗？看起来相同？我正在使用IE8和开发工具切换到IE7并更改格式…文本应该是图片的右边，但在IE7的下面…使用IE8在IE7模式下查看与实际使用IE7不一样。我注意到了很多不同。文本是在图片的右边还是下面？这是我看到的：嗯，dang使它在IE7中工作，但在其他浏览器中不工作！！：-复制/编辑了答案，我的第二个想法在al上有效l浏览器：）啊，太好了！是的，我需要做的就是把浮点数放在那里，一切都很好。谢谢！好吧，这使它在IE7中工作，但在其他浏览器中不工作！！：-复制/编辑了答案，我的第二次尝试在所有浏览器上都有效：）啊，太好了！是的，我需要做的就是把浮点数放在那里，一切都很好。谢谢！

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;   
}

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;   
}

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 }