为什么固定位置元素的静态定位子元素会增加宽度？答案

【问题标题】：Why are statically positioned children of a fixed position element gaining width?为什么固定位置元素的静态定位子元素会增加宽度？
【发布时间】：2010-10-26 01:41:34
【问题描述】：

更新：

这似乎只是ul/li 的问题，如果我用div 替换ul 并删除li 并将相关样式应用于a 而不是它的美好的。 ID' 仍然想知道为什么 ul/li 结构会出现问题，因为边距/填充已被明确重置。

我在 IE7 中的固定位置元素的子级遇到了一些问题。他们似乎从某个地方获得了宽度/边距/填充，但我无法辨别在哪里或如何修复它。

您可以在jsFiddle here 中查看。我添加了 bg 颜色只是为了调试。 image/li 标签应该与黄色齐平，并且在 IE8 以及 mozilla 和 webkit 中。但在 IE7 中，左侧有大约 20 像素的空间将它们推过，就好像 li、a 或 img 标记有边距一样。但是，如果我查看 IEDevToolbar 中的属性，则没有应用边距或填充。此外，即使我为所有内容分配宽度并使用 IEDevToolbar 直接在每个元素上将边距/填充归零，也会发生这种情况。

我完全迷失了这个。

以下是相关代码...有问题的布局上有一个 XHTML 1.0 过渡文档类型：

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

【问题讨论】：

标签： css internet-explorer-7 css-position

【解决方案1】：

这与position:fixed; 无关。这是列表样式的问题。使用list-style: none inside none; 时，IE7 仍会为列表标记添加间距，尽管标记设置为none。解决方案是设置list-style-type: none;，而不是使用简写。

【讨论】：