Question

我遇到了IE7的问题。我有一个标题为“imageOptions”的div，里面有一个无序列表。在FireFox / IE8等中。它将列表显示为内联2 x 2无序列表。但是在IE7中它将它显示为一个长列表（4项）。如何在IE7中实现IE8 / FireFox外观？这是我的代码（HTML First）

<div class="imageOptions">
  <?php do { ?>
  <ul>
    <li> 
     <a href="#" onclick="MM_swapImage('target','','propertyimages/<?php echo $row_select_property['image_url']; ?>',1)">
     <img src="thumbnail.php?image=propertyimages/<?php echo $row_select_property['image_url']; ?>" alt="Small Image 1" class="topImage" onclick="MM_setTextOfLayer('imageText','','<p><?php echo $row_select_property['image_desc']; ?></p>')" /></a>
    </li>
  <?php } while ($row_select_property = mysql_fetch_assoc($select_property));
</div>

... CSS

.imageOptions {
 clear: both;
 float: right;
 margin: 15px 75px 0;
 width: 185px;
}
.imageOptions ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.imageOptions li {
 float: left;
 padding: 5px;
}

提前致谢。

Answer 1

你没有关闭<ul>

Answer 2

1）使用CSS重置。不同浏览器上列表的默认边距和填充不同：

ul, li {
    margin:0;
    padding:0
}

2）除float:left之外，A将所有样式放在LI的{{1}}标记上，并在A标记上使用display:block，这样您就可以充分利用边距和填充。

请参阅我的教程：I love lists。

Answer 3

您在HTML中错过了</ul>。

Answer 4

移动＆lt; ul＆gt;之前： <?php do { ?>

带有列表的IE7问题

4 个答案: