Question

嘿伙计这是我用来显示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>";

Answer 1

在Internet Explorer中，第二行因上一行的不同高度而被捕获。您可以通过两种方式解决此问题：

1）

在“＃three-col li”的样式规则中，还指出了一个高度：

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

2）

您可以添加元素以清除行之间的差距。

我想你可能已经尝试过了，但是这样做的好方法是：

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

Answer 2

我发现了问题

在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>";

并感谢Sohnee的出色回答

Answer 3

尝试将此css放入您的文件中：

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

在IE中连续显示3个图像的问题

3 个答案: