html - 使用 CSS 创建 'tags' - IE 中的设计问题

Question

我在包含“标签”的页面上有一个部分。我使用下面的代码进行样式设置，但在 IE 中(在某些标签上)箭头部分和方形部分之间有一个小空间。这种情况仅适用于此 Fiddle 中的某些标签:http://jsfiddle.net/vzn3yw8r/2/

IE 是我遇到此问题的唯一浏览器。我以为可能是border-spacing，但是经过测试似乎不是这样。

CSS

.tags{
    margin:0;
    padding:0;
    right:24px;
    bottom:-12px;
    list-style:none;
}
.tags li, .tags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;
    margin-bottom:5px;
}
.tags a{
    margin-left:20px;
    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;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #38958d transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;      
}
 .tags a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#d9eae8;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
}

HTML

<ul class="tags">
    <li><a href="#"><span>Green Lantern</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="#"><span>Green Lantern</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="#"><span>Green Lantern</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="#"><span>Green Lantern</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="#"><span>Green Lantern</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="#"><span>Green Lantern</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="#"><span>Green Lantern</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
</ul>  

Answer 1

看起来这是 IE 的另一个怪癖，它不能始终如一地呈现 :before 伪元素。

我能找到的唯一解决方法是将 a:before 的“左”样式从 -12px 更改为 -11px，然后在“a”元素的左上角和左下角添加一些圆 Angular 以形成锯齿状的 Angular 看起来好多了。

CSS

.tags{
    margin:0;
    padding:0;
    right:24px;
    bottom:-12px;
    list-style:none;
}
.tags li, .tags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;
    margin-bottom:5px;
}
.tags a{
    margin-left:20px;
    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;   
    border-top-left-radius:2px;  /* ===change here=== */
    border-bottom-left-radius:2px;  /* ===change here=== */
}
 .tags a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-11px; /* ===change here=== */
    width:0;
    height:0;
    border-color:transparent #38958d transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;      
}
 .tags a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#d9eae8;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
}