css - 较大的 border-bottom 在 Firefox 和 Chrome 中打破 border-left 和 border-right

Question

当在已经有 1px 边框的 div 中覆盖 border-bottom 的大小时，Firefox 和 Chrome 呈现 border-left 和 border-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)

实际结果(Firefox 15.0.1 和 Chrome 22)

在最新的 Chrome 和 Firefox 中，左右边框总是停在 border-bottom 的中间。我在 Bugzilla 或 Chromium 的问题页面中找不到任何关于此的报告。

有解决办法吗？

Answer 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;
}​

Demo

在最新的 Chrome 和 Safari 上测试并工作，FF 的小问题(win)