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字体大小设置了显式大小，因为可能存在继承引起的问题。

在调试IE版本时非常方便的工具是IE9中的内置开发人员工具（F12用于启动它）。从这里你可以改变IE的版本。我不会指望这是100％准确，但它是一个有用的工具。

Answer 2

尝试将此添加到您的CSS：

#div-whatson ul li {
    padding: 0;
    margin: 0;
}

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

2 个答案: