Pourquoi les enfants positionnés statiquement d'un élément de position fixe gagnent-ils en largeur?

Question

MISE À JOUR:

Ce semble être seulement un problème avec ul/li si je remplace le ul avec un div et retirez le li et appliquer le style correspondant aux « s au lieu a ses fines. ID 'reste à savoir pourquoi la structure ul/li présente un problème puisque les marges/bourrages ont été réinitialisés explicitement. J'ai des problèmes avec les enfants d'un élément fixe dans IE7. Ils semblent gagner de la largeur/marge/rembourrage de quelque part mais je ne peux pas discerner où ou comment le réparer. Vous pouvez jeter un oeil à jsFiddle here. J'ai ajouté les couleurs bg juste pour le débogage. Les balises image/li devraient être de couleur jaune, et sont dans IE8 ainsi que mozilla et webkit. Mais dans IE7, il y a un espace supplémentaire de ~ 20px sur la gauche qui les pousse, comme si les tags li, a ou img avaient une marge. Cependant, si je regarde les propriétés dans IEDevToolbar, aucune marge ni aucun remplissage ne sont appliqués. En outre, cela se produit même si j'affecte des largeurs à tout et met à zéro la marge/remplissage directement sur chaque élément avec IEDevToolbar.

Je suis complètement perdu sur celui-ci.

est Ci-dessous le code relevent ... Il y a un doctype XHTML 1.0 Transitional sur la mise en page en question:

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

Answer 1

Cela n'a rien à voir avec position:fixed;. C'était un problème avec le style de la liste. Lors de l'utilisation de list-style: none inside none; IE7 ajoute toujours l'espacement pour le marqueur de liste, bien que le marqueur soit défini sur none. La solution consistait à définir list-style-type: none; au lieu d'utiliser le raccourci.