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 {覆盖了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

不会过分

希望这会有所帮助：）

编辑，这是另一种观点，但这种方法与使用float

不同

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。基本上前两行会重置您使用的元素，以便在所有浏览器中看起来都一样。

为什么这个无序列表在IE7中的格式不同？

1 个答案: