1

既に 1 ピクセルの境界線がある のサイズをオーバーライドすると、Firefox と Chrome は と を正しくレンダリングborder-bottomしません:divborder-leftborder-right

HTML

<div></div>

CSS

div{
    width: 300px;
    height: 200px;
    border: 1px solid #9fd;
    border-bottom: 50px solid #333;
}

jsFiddle リンク: http://jsfiddle.net/azSrQ/

期待される結果 (Safari 6.0.1)

サファリ 6.0.1

実際の結果 (Firefox 15.0.1 および Chrome 22)

Firefox と Chrome

border-bottom最近の Chrome や Firefox では、左右の境界線が常に途中で止まってしまいます。Bugzilla または Chromium の問題ページで、これに関するレポートを見つけることができませんでした。

回避策はありますか?

4

2 に答える 2

1

仕様によれば、これにより、一方の境界幅からもう一方の境界幅への傾斜勾配が得られます。しかし、幅の1つが1pxしかない場合、それは上記のように生成されます。

于 2012-10-18T00:57:15.643 に答える
1

それは奇妙だと思います。それとも、デフォルトの動作ですか？それらは、下の境界線の 50% で正確に停止します。

とにかく、これをエミュレートする方法は次のとおりです。

div:after {
    content:".";
    color:#333;
    position:absolute;
    bottom:-50px; left:-1px; right:-1px;
    line-height:25px;
    border-left:1px solid #9fd; border-right:1px solid #9fd;
}​

デモ

最新の Chrome と Safari でテストおよび動作中、FF (win) ではほとんど問題ありません

于 2012-10-16T14:40:48.243 に答える