铬的CSS边框太厚

Question

我有一个仅在Google Chrome浏览器中出现的问题。边框似乎太“厚”。在Firefox中，一切似乎都很正常（到目前为止，我仅在chrome和firefox中进行过测试）。

如您在图像上看到的，存在两个问题：

1）上箭头：边框要粗（它是1像素实线#aaa）。当我用CSS绘制表格时，边框是正常的。仅在div和form输入字段中会发生这种情况。

2）下箭头：内部div的背景略高于外部div的边框。

这可能是Chrome中的错误吗？

.outer-div{
    border: 1px solid #aaa;
    box-sizing: border-box;
}
.outer-div > .inner-div{
    padding: 5px;
    background: linear-gradient(#eee,#ddd);
}

编辑：在下部箭头指向的位置产生结果的代码。

.calendar-events-block{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 15px 0;
    border: 1px solid #aaa;
}

.calendar-events-block > .events{
    flex: 1 1 auto;
}

.calendar-events-block > .events > .title{
    padding: 10px;
    font-weight: 700;
    border-bottom: 1px solid #aaa;
    background: linear-gradient(#eee,#ddd);
}

编辑2：如果我缩小到90％，一切似乎都正常（例如在Firefox中）。

编辑3：出现问题的jsfiddle（http://jsfiddle.net/p31ajt48/）。

编辑4：有趣的细节：当我放大或缩小时，“溢出”（标题背景越过边界）的问题消失了。

另一个屏幕截图：

左边有一张桌子，右边有一些div。表格的边框= 1px实心＃aaa，div的边框= 1px实心#aaa，但是表格边框比div边框细得多。

Answer 1

由于这仅发生在chrome中，因此可能与chrome的默认样式有关。尝试在文档中添加CSS重置或尝试添加

* {
border: none;
}

到你的身体。