4

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

http://jsfiddle.net/QSm2Z/2/

如果您在 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>
4

2 回答 2

3

观察

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

我怀疑这是预期的行为，即使规范指出：

该规范没有定义不同样式的边框应该如何在角上连接。

您可以看到带有 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;
}
于 2013-05-15T21:54:40.440 回答
0

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

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

于 2013-05-15T21:27:05.930 回答