There seems to be a problem with the way IE11 is rendering the :before pseudo-element. In the example below every second or third tag has a space between the a:before and the "a" tag. This does not happen in other browsers I have tested.
It looks like it happens on the second tag in the row and then every thrird after that until it wraps to a new row. Is this a bug in IE, surly the rendering of the tags should be consistent.
jsfiddle of my code : jsfiddle demo of issue
CSS
.tags{margin:0;
padding:0;
right:24px;
bottom:-12px;
list-style:none;
}
.tags li, .tags a{
float:left;
height:24px;
line-height:24px;
font-size:11px;
margin-bottom:5px;
}
.tags a{
margin-
padding:0 10px 0 12px;
background:#38958d;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.tags a:before{
content:"";
float:left;
width:0;
height:0;
border-color:transparent #38958d transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
HTML:
<ul class="tags"><li><a href="#"><span>Green Lantern</span> </a></li><li><a href="#"><span>Green Lantern</span> </a></li><li><a href="#"><span>Green Lantern</span> </a></li><li><a href="#"><span>Green Lantern</span> </a></li><li><a href="#"><span>Green Lantern</span> </a></li><li><a href="#"><span>Green Lantern</span> </a></li><li><a href="#"><span>Green Lantern</span> </a></li></ul>I am running IE11 on Win7 Pro.