css边框式双1px间隙铬

时间：2013-05-15 20:52:52

标签： css google-chrome border

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

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

如果你在firefox中查看代码/即你得到连续的黑条，在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>

2 个答案:

答案 0 :(得分：3)

观察

在角点整形算法中似乎存在一个小故障，即使没有边缘，也会在垂直边缘上准备好边界时留下斜边。

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

  

此规范未定义不同样式的边框   应该加入角落。

您可以看到带有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;
}

答案 1 :(得分：0)

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

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

相关问题
最新问题