0

「負の境界半径」でタグシステムを構築しようとしています（より適切な説明がありません）。

私はとを使用: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;
}

​
4

2 に答える 2

1

私はなんとか自分でエラーを取得することができました。1pxのオフセットを引き起こしたのは：afterと：beforeのvertical-align：middleでした

于 2012-05-11T10:05:30.243 に答える
0

白い境界線は、IEだけでなく、FirefoxとOperaでも表示されます。ただし、それらは境界半径に溶け込みます。

http://jsfiddle.net/CrxQG/とhttp://jsfiddle.net/CrxQG/1/で、それぞれ黒の境界線の色と境界線の半径を削除して簡単に確認できます。

于 2012-04-04T11:43:50.473 に答える