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>
最佳答案
观察
拐 Angular 整形算法中似乎存在一个小故障，它会留下斜边以准备在垂直边上遇到边界，即使没有斜边。
我怀疑这是预期的行为，即使 spec指出:
This specification does not define how borders of different styles should be joined in the corner.
您可以看到带有 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;
}
关于css border-style double 1px gap chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16574776/