【问题标题】：css border-style double 1px gap chromecss边框样式双1px间隙镀铬
【发布时间】：2013-05-10 14:22:45
【问题描述】：

div 左侧或右侧的双边框为 3px，但在 chrome 中，它在边框顶部留下 1px 的间隙。我已经尝试广泛查看这是一个浏览器错误还是某种解决方案。

如果您在 firefox/ie 中查看代码，您会看到连续的黑条，在 chrome 和我的手机/平板电脑上，我会在每个 div 的顶部看到 1px 的间隙，这会破坏黑条

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
    height: 100px;
    width: 100px;
    border-right: 3px double #c7c7c7;
    border-left: 3px double #c7c7c7;
    background-color: #06F;
    padding: 0px;
    margin: 0px;
    border-bottom-style:
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>

【问题讨论】：

这不是错误。这是一个功能:)

标签： css google-chrome border

【解决方案1】：

看起来像一个浏览器错误 - 常规 solid 边框不会发生这种情况 - 看看这个：http://jsfiddle.net/QSm2Z/8/

可能与此错误有关：https://code.google.com/p/chromium/issues/detail?id=61702

【讨论】：

【解决方案2】：

观察

在角整形算法中似乎存在一个小故障，它会留下一个斜接的边缘，以准备在垂直边缘上遇到一个边界，即使没有。

我怀疑这是预期的行为，即使 spec 声明：

本规范没有定义不同样式的边框如何应该在角落里加入。

您可以看到带有 2 像素实心边框的斜接连接的证据（屏幕截图）：

如果你仔细观察，你会发现另一个潜在问题的表现：上边框和侧边框的边缘不接触（截图）：

解决方法

相比之下，这很复杂/不优雅，但解决问题的一种方法是隐藏违规元素的顶部和底部边缘。您需要调整实际网站的尺寸。

示例：http://jsfiddle.net/QSm2Z/10/

.test{
    position: relative;
    height: 100px;
    width: 152px;
    overflow: hidden;
}

.test:after {
    width: 100px;
    height: 102px;
    content: "";
    top: -1px;
    position: absolute;
    background-color: #06F;
    border-left: 26px double #000;
    border-right: 26px double #000;
}

【讨论】：

感谢您对此进行调查，我尝试使用透明边框和/或零长度边框但没有运气解决问题，幸好只是将我的生产代码更改为顶部：-1px;而不是顶部：0；为我解决了这个问题，因为我已经在使用 :before 声明。对于一长串浏览器错误，看起来像是另一个。你会认为这样一个简单的基本语句是没有错误的！