0

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

我使用:after并:before在“外部弯曲”处创建了一些人造边框。它运行良好，但在 MSIE 中有一些奇怪的行为。通常我top:5px在:afterand上: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;
}

​
4

2 回答 2

1

我自己设法得到了错误。它是垂直对齐：中间与 :after 和 :before 导致 1px 偏移

于 2012-05-11T10:05:30.243 回答
0

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

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

于 2012-04-04T11:43:50.473 回答