css - 在 Firefox 和 Chrome 中，较大的边框底部会破坏左边框和右边框

Question

当覆盖已经有 1px 边框border-bottom的 a的大小时，Firefox 和 Chrome 会错误地渲染and ：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）

实际结果（Firefox 15.0.1 和 Chrome 22）

border-bottom在最新的 Chrome 和 Firefox 中，左右边框总是停在中间。我在 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;
}​

演示

测试并在最新的 Chrome 和 Safari 上工作，FF 的小问题（赢）

Answer 2

根据规范，这应该给出从一个边框宽度到另一个边框宽度的倾斜渐变。但是当其中一个宽度只有 1px 时，就会生成您在上面看到的内容......