较大的边框底部在Firefox和Chrome中打破了border-left和border-right

Question

当覆盖border-bottom中已有1px边框的div大小时，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）

的问题很少

Answer 2

根据规格，这应该给出从一个边框宽度到另一个边框宽度的倾斜渐变。但是当其中一个宽度仅为1px时，会产生上面看到的东西......