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

【问题标题】：Larger border-bottom breaks border-left and border-right in Firefox and Chrome在 Firefox 和 Chrome 中，较大的边框底部会破坏左边框和右边框
【发布时间】：2012-10-06 16:30:42
【问题描述】：

在已经有 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 的问题页面中找不到任何关于此的报告。

有解决办法吗？

【问题讨论】：

标签： css firefox google-chrome border

【解决方案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）

【讨论】：

【解决方案2】：

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

【讨论】：

这很有趣。你指的是哪个规格？
嗯。曾经在dev.w3.org/csswg/css3-background，但看起来他们已经放松了语言，基本上是“你想做的任何事情”......