爲什麼固定位置元素的靜態定位子元素會增加寬度？

-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

爲什麼固定位置元素的靜態定位子元素會增加寬度？

回答

相關問題