2 couleurs bordure-droite

Question

Je voudrais créer une bordure à deux couleurs-droite dans la navigation li-élément, sans JavaScript, div supplémentaire et compatible avec au moins IE8. Ainsi, chaque élément de navigation aurait des bordures droites noires et grises.

L'image ci-dessus est d'un de mes points d'arrêt. Actuellement j'utilise border-left et -right. Cela ne produit pas le résultat voulu, car je ne peux pas contrôler les objets flottants après leur empilement dans les lignes + autres problèmes.

<nav> 
    <ul> 
     <li><a href="">NHL Home</a></li> 
     <li><a href="">Seasons</a></li> 
     <li><a href="">Teams</a></li> 
     <li><a href="">Records</a></li> 
     <li><a href="">Players</a></li> 
     <li><a href="">Player origins</a></li> 
     <li><a href="">Player age maps</a></li> 
     <li><a href="">Analysis</a></li> 
     <li><a href="">Contact</a></li> 
    </ul> 
</nav> 

Comment puis-je y parvenir?

Answer 1

Tout d'abord, ajoutez cette règle CSS:

nav ul li { 
    box-sizing:border-box; 
} 

Il rend le navigateur considère les frontières et le rembourrage dans la largeur totale de l'objet. Ensuite, vous pouvez ajouter des bordures:

border-left:1px solid #CCC; 
border-right:1px solid #000; 

Answer 2

<style type="text/css"> 
    ul li { 
    border-right: 1px solid black; 
    box-shadow: 1px 0px gray; 
    /* For IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000')"; 
    /* For IE 5.5 - 7 */ 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000'); 
    } 
</style> 

Answer 3

essayer cette

http://jsfiddle.net/umzA3/6/

li:after { 
content:""; 
position:absolute; 
z-index:1; 
border-right:1px solid black; 
display:block; 
top:0%; 
right:0%; 
height:100%; 
} 

devrait fonctionner dans IE8 +