Comment se débarrasser du cadre autour de mes icônes sociales?

Je ne peux pas me débarrasser du cadre autour de mes icônes sociales (voir jsfiddle: http://jsfiddle.net/r7g8r/2/). J'ai essayé Img border: 0 et "none" mais sans succès. Qu'est-ce qui ne va pas? Merci.Comment se débarrasser du cadre autour de mes icônes sociales?

CSS

img { 
    max-width: 100%; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 
.social { 
    position: absolute; 
    right: 50px; 
    top: 13px; 
    text-align: right; 
} 


.social ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 

} 
.social li { 
    margin: 2px; 
} 

.fbbl, .fbbw, .linkedinbl, .linkedinbw, .vimeobl, .vimeobw{ 
    background: url(images/sprites.png) no-repeat; 

} 



.fbbw{ 
    background-position: -51px -1px ; 
    width: 34px; 
    height: 35px; 
} 

.fbbw:hover{ 
    background-position: -1px 0; 
    width: 34px; 
    height: 34px; 
} 



.linkedinbw{ 
    background-position: -51px -103px ; 
    width: 34px; 
    height: 35px; 
} 
.linkedinbw:hover{ 
    background-position: 0 -50px ; 
    width: 34px; 
    height: 34px; 
} 


.vimeobw{ 
    background-position: -49px -52px ; 
    width: 34px; 
    height: 35px; 
} 
.vimeobw:hover{ 
    background-position: 0 -103px ; 
    width: 33px; 
    height: 34px; 
}

HTML

<div class="social"> 
      <ul> 
      <li><img class="fbbw"></li> 
      <li><img class="linkedinbw"></li> 
      <li><img class="vimeobw"></li> 
      </ul> 
     </div>

Source

2013-06-02 Greg

Il n'y a pas de bordure dans les navigateurs sauf ceux de webkit, mais il n'y a pas de jeu de bordure. L'URL de l'image est cassée, donc les images ne s'affichent pas. Êtes-vous sûr que ce n'est pas seulement l'icône de l'image cassée dans webkit? Avez-vous essayé avec des images valides? –

La chose étrange est que regarder le style calculé n'aide pas du tout ... Je ne peux pas trouver d'où vient cette frontière ... Très intéressant! Aussi, j'aimerais noter que votre code ne fonctionne pas dans Firefox. – kirelagin

Salut David - voir les résultats avec une image valide: http://jsfiddle.net/r7g8r/2/ Même problème Tks – Greg

Je ne suis pas sûr de ce que exactement provoque ce comportement, mais vous ne devriez pas utiliser <img> ici. Il est invalide d'avoir un <img> sans src.

Vous devez utiliser <div> à la place. Voir cette version: http://jsfiddle.net/r7g8r/3/. Il n'a pas cette bordure et fonctionne à la fois dans Chrome et Firefox (alors que votre version ne fonctionne pas dans FF).

Source

2013-06-02 16:41:12 kirelagin

bien repéré, j'ai totalement négligé cela ... Vous pouvez également appliquer la classe à la 'li', de sorte que vous n'avez pas besoin d'un' div' vide http://jsfiddle.net/r7g8r/ 4 /. Ou dans la vraie vie, ajoutez-le à un «a», car cela deviendra probablement des liens sociaux – Pevara

Essayez

.social ul li img 
{ 
border-width:0px; 
}

Source

2013-06-02 16:26:32

Ne fonctionne pas malheureusement – Greg

Comment se débarrasser du cadre autour de mes icônes sociales?

Répondre

Questions connexes