CSS边框样式双线1像素间隙在Chrome中的表现

Question

CSS边框样式双线1像素间隙在Chrome中的表现

cssgoogle-chromeborder

4

元素的左侧或右侧有一个3像素的双边框，但是在Chrome浏览器中，顶部会留下1像素的间隙。我已经尝试了解这是否是浏览器的bug或是否有解决方案。

如果您在Firefox / IE中查看代码，则会得到连续的黑色条纹，但是在Chrome浏览器和我的手机/平板电脑上，每个

元素的顶部都会出现1像素的间隙，从而破坏了黑色条纹。

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

<!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>

- user2387459

这不是一个错误，而是一种特性 :) - maxlego

2个回答

0

看起来是浏览器的一个bug - 在普通的solid边框下不会发生这种情况 - 可以查看这个链接: http://jsfiddle.net/QSm2Z/8/

可能与这个bug有关: https://code.google.com/p/chromium/issues/detail?id=61702

- Duncan Lock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim M. · Accepted Answer

观察

在角落修形算法中存在一个故障，它会在准备与垂直边缘相遇时留下一条斜接边，即使并没有。

我怀疑这不是预期的行为，尽管规范指出：

本规范未定义不同样式的边框应如何连接在一起。

您可以通过2像素实线边框（截图）看到斜接接头的证据：

enter image description here

如果您仔细观察，还可以看到另一个潜在问题的表现：顶部和侧边框的边缘没有接触（截图）：

enter image description here

解决方法

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

示例：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;
}