Html 在IE中连续显示3个图像时出现问题

嘿，伙计们，这是我的代码，我用来显示3个图像的行

FF中的一切都很好，但IE除外

我的代码是：

echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

$counter++; 

echo '
<li>
<div class="post-content">
        <a class="zoom1">
        <img src="'.$galsettings[setImgDir].'/'.$cat[galCatLocation].'/'.$cat[galCatImg].'" alt="'.$cat[galCatName].'" />
        </a>
        </div>
        <span class="post-bottom"></span>           
        <div class="meta">
        <p>'.$cat[galCatName].'</p>';

        echo ' </div>';

        echo '</li>';

if ( $counter == 3 ) { 
echo '<ul>'; 
$counter = 0; 
} 
}

echo "</ul></div>";

echo””；
而（$cat=$db->sql\u fetchrow（$catinfo））{
$counter++；
回声'

“.$cat[galCatName]”
”；
回声'；
回音“
”；
如果（$counter==3）{
回声“
”；
$counter=0；
} 
}
回声“
”；

尝试将此css放入文件：

div.post-content {display:inline;}
div ul li {display:inline;}

---

在Internet Explorer中，第二行被前一行的不同高度所覆盖。您可以通过两种方式解决此问题：

(一)

在“三列”的样式规则上，还应注明高度：

#three-col li {
  background:url("../img/bg-post-top.png") no-repeat scroll 0 0 transparent;
  float:left;
  height:312px;
  margin:3em 20px 0 0;
  overflow:hidden;
  padding-top:20px;
  position:relative;
  width:300px;
}

(二)

可以添加元素以清除行之间的间隙

我想你可能已经尝试过了，但一个好方法是：

  ...
</ul>
<div style="clear: both;">&nbsp;</div>
<ul>
  ...

。。。


...

我发现了问题所在

只要在while循环结束后移动那个条件语句，一切都会很好

echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

echo '
        <li>

        echo '</li>';


}
if ( $counter == 3 ) { 
echo '</ul> 
<div style="clear: both;">&nbsp;</div> 
<ul id=\"three-col\"> '; 
$counter = 0; 
} 
echo "</ul></div>";

echo””；
而（$cat=$db->sql\u fetchrow（$catinfo））{
回声'

回音“
”；
}
如果（$counter==3）{
回声'
”；
$counter=0；
} 
回声“
”；

谢谢Sohnee给我的回答