IE7 列表问题答案

【问题标题】：IE7 Issue with ListsIE7 列表问题
【发布时间】：2011-01-28 23:06:09
【问题描述】：

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

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

提前致谢。

【问题讨论】：

快速猜测：这可能与列表 </ul> 缺少结束标记有关。

标签： html css internet-explorer-7

【解决方案1】：

你没有关闭你的<ul>

【讨论】：

那是个好地方，已将其添加到我的页面。它现在显示为内联。应该可以从这里走。 PHP While 循环覆盖了关闭的 UL - 它在我的代码中更进一步，但已经覆盖了它。

【解决方案2】：

1) 使用 CSS 重置。不同浏览器上列表的默认边距和内边距各不相同：

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

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

查看我的教程：I love lists。

【讨论】：

为此干杯。我已经为页面设置了一个 * 到 margin: 0;和填充：0； - 教程对未来非常有用！
* 在 CSS 中非常耗费资源。如果可以的话，避免它。 Yahoo CSS reset2 是您应该使用的：developer.yahoo.com/yui/reset

【解决方案3】：

您在 HTML 中缺少</ul>。

【讨论】：

【解决方案4】：

将


  <?php do { ?>

【讨论】：