为什么固定位置元素的静态定位子元素会变宽?

更新:

这似乎只是一个问题 ul / li 如果我更换 保险商实验室 div 并移除 锂 a 反而很好。我还是很想知道为什么 / 锂 结构出现问题,因为边距/填充已显式重置。

我对IE7中固定位置元素的子元素有很多问题。他们似乎在某个地方增加宽度/边距/填充,但我不知道在哪里或如何修复它。

你可以进去看看 jsFiddle here . 我添加背景颜色只是为了调试。图像/li标签应该与黄色齐平,并且在IE8以及mozilla和webkit中。但是在IE7中,在左边有一个额外的20像素的空间将它们推倒,好像 , 一 img 标签上有空白。但是,如果我查看IEDevToolbar中的属性,则不会应用边距或填充。此外,即使我为所有内容分配宽度,并使用IEDevToolbar直接在每个元素上清除边距/填充,也会发生这种情况。

我完全迷路了。

<style type="text/css">
 .social-widgets {
    position: fixed;
    top: 125px;
    left: 0px;
    background: #f00;
    width: 34px;
  }
  .social-widgets-content {
    list-style: none inside none;
    margin: 0;
    padding: 0;
    text-align: left;
    background: #ff0;
  }
  .social-widgets-content li {
    margin: 10px 0 !important;
    padding:0; 
    width: 34px;
    background: #0f0;
  }
  .social-widgets-content img {
    display:block;
    border-top: 2px solid #e9e8e8;
    border-bottom: 2px solid #e9e8e8;
    border-right: 2px solid #e9e8e8;
    padding: 0px; margin:0px;
    background: #00f;
  }
</style>

<div class="social-widgets">
  <ul class="social-widgets-content">
    <li><a href="#"><img src="/images/button/button.facebook.png"></a></li>
    <li><a href="#"><img src="/images/button/button.twitter.png"></a></li>
    <li><a href="#"><img src="/images/button/button.feedback.png"></a></li>
  </ul>
</div> <!-- /.social-widgets -->