Css 较大的边框底部在Firefox和Chrome中打破了左边框和右边框
当覆盖已具有1px边框的Css 较大的边框底部在Firefox和Chrome中打破了左边框和右边框,css,firefox,google-chrome,border,Css,Firefox,Google Chrome,Border,当覆盖已具有1px边框的div中边框底部的大小时，Firefox和Chrome会错误地渲染左边框和右边框： HTML jsiddle链接： 预期结果（Safari 6.0.1） 实际结果（Firefox 15.0.1和Chrome 22） 在最新的Chrome和Firefox中，左边框和右边框总是停在边框底部的中间。我在Bugzilla或Chromium的问题页面上找不到任何关于这方面的报告 有解决办法吗？我想这很奇怪。或者这是默认的行为？它们正好在底部边界的50%处停止 无论如何，这里有一
div中边框底部的大小时，Firefox和Chrome会错误地渲染左边框
和右边框
：
HTML
jsiddle链接：
预期结果（Safari 6.0.1）
实际结果（Firefox 15.0.1和Chrome 22）
在最新的Chrome和Firefox中，左边框和右边框总是停在边框底部的中间。我在Bugzilla或Chromium的问题页面上找不到任何关于这方面的报告
有解决办法吗？我想这很奇怪。或者这是默认的行为？它们正好在底部边界的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）根据规范，这应该会提供从一个边框宽度到另一个边框宽度的倾斜渐变。但是当其中一个宽度只有1px时，就会产生上面所看到的东西……这很有趣。你指的是哪种规格？嗯。以前是，但看起来他们已经放宽了语言，基本上是“你想做什么就做什么”。。。
div{
width: 300px;
height: 200px;
border: 1px solid #9fd;
border-bottom: 50px solid #333;
}
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;
}