css ie7 在行之间添加额外的空间

Question

我刚刚部署了一个站点并提出了一些我认为我应该预料到的 ie7 css 问题。我在 IE7 的虚拟版本中调试时遇到问题，我已经安装了 debugBar 和 IETester，但是我无法像使用 Chrome 或 Firebug 那样直观地看到元素上的填充或边距...

所以我的问题的第一部分 - 它们是我可以在 IE7 中使用的有助于调试 css 的工具吗？

第二部分与出现在两个不同页面上的元素有关。该元素是一个 UL，它在元素内呈现额外的空间，在另一个页面上它呈现正确。

html 是:

  <div id="nextSevenEvents">
  <ul id="nextSevenEventseventList">
    <li>
      <div class="dateEntry last span-6 last borderTop">  
        <div class="whatsOnDate last span-2 "> Fri 20 Apr</div>
        <div class="whatsOnTitle span-4 last">Ladies v Royal (Away) FR</div>
      </div>
    </li>
    <li>
      <div class="dateEntry last span-6 last ">  
        <div class="whatsOnDate last span-2 "> &nbsp;</div>
        <div class="whatsOnTitle span-4 last">Terry on hols</div>
      </div>
     </li>
    </ul>
  </div>

这些的CSS是:

   #div-whatson ul {
     list-style: none;
     padding: 5px 0 0;
     margin: 0;
   }
   .dateEntry {
     padding: 5px 0 0 0;
   }
   .whatsOnDate {
     font-size: 0.8em;
     line-height: 1em;
   }
     .whatsOnTitle {
     font-size: 0.9em;
     line-height: 1em;
   }

我在这里错过了什么？

我的网站是基于蓝图

谢谢

更新:#div=whatson 是一个父元素并且其中有一些其他元素(将其排除在外，否则我的代码会继续下去

Answer 1

您是否有一个包含 id 'div-whatson' 的父元素来包装列表？您是否为 body font-size 设置了明确的大小，因为继承可能会引起问题。

调试 IE 版本时非常方便的工具是 IE9 中的内置开发人员工具(F12 调出)。从这里您可以更改 IE 的版本。我不会指望这是 100% 准确的，但它是一个有用的工具。