Question

我正在尝试构建一个带有“负边界半径”的标签系统（我没有更好的描述）。

我使用:after和:before创建了一些“外弯”的人造边框。它运作良好，但在MSIE中有一些奇怪的行为。通常我在top:5px和:after上有:before，但在IE中我必须添加一个额外的像素（结果为top: 6px）（参见IE8：水平线到左右不应该是可见的）

那可能是什么？

http://jsfiddle.net/rhGZw/3/

<div class="test"><div>foo</div></div>

body {
    background: gold;
    margin: 10px;
}
.test {
    display: inline-block;
    height: 30px;
    overflow: hidden;
}
.test > div {
    background: white;
    border-top-left-radius: 5px;
    border-top-right-radius : 5px;
    height: 20px;
    padding: 5px;
    display: inline-block;
}
.test:before {
    content: '';
    width: 5px;
    height: 20px;
    position: relative;
    top: 5px;
    margin-right: -5px;
    background: none;
    border-color: white;
    border-style: solid;
    border-width: 0px;
    border-bottom-width:5px;
    border-right-width:5px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    z-index: -1;
}

.test:after {
    content: '';
    width: 5px;
    height: 20px;
    position: relative;
    top: 5px;
    margin-left: -5px;
    background: none;
    border-color: white;
    border-style: solid;
    border-width: 0px;
    border-bottom-width:5px;
    border-left-width:5px;
    border-bottom-left-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    z-index: -1;
}

Answer 1

我设法自己弄错了。它是垂直对齐：中间的：after和：之前导致1px偏移

Answer 2

白色边框在Firefox和Opera中也是可见的，而不仅仅是IE。但是，它们会融入边界半径。

很容易看到http://jsfiddle.net/CrxQG/和http://jsfiddle.net/CrxQG/1/分别删除黑色边框颜色和边框半径。

MSIE中的奇怪1px偏移：之后和：之前

2 个答案: