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

-1

这似乎只与ul/li一个问题，如果我更换ul与div并删除li和相关样式应用到a的，而不是它的罚款。 ID'仍然知道为什么ul/li结构出现问题，因为边距/填充已被明确重置。

林具有在IE7固定位置元素的子元素SOEM麻烦。他们似乎从某处获得宽度/边距/填充，但我无法辨别在哪里或如何解决它。

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

我完全失去了这一个。

下面是培训相关代码...有对有问题的布局XHTML 1.0过渡的doctype：

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

来源

2010-10-24 prodigitalson

这有什么好做position:fixed;。这是列表样式的问题。使用list-style: none inside none;尽管标记被设置为none，IE7仍会为列表标记添加间距。解决方法是设置list-style-type: none;而不是使用简写。

来源

2010-10-25 17:41:34 prodigitalson

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

回答

相关问题