chrome中的css边框太厚了

Question

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

如图所示，有两个问题：

1) 上箭头：边框太粗（1px 实心#aaa）。当我用css绘制表格时，边框是正常的。这只发生在 div 和表单输入字段中。

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。 table的边框=1px solid #aaa，div的边框=1px solid #aaa，但是table的边框比div的边框要细很多。

Answer 1

由于这只发生在 chrome 中，它可能与 chrome 的默认样式有关。尝试将css重置添加到文档或尝试添加

* {
border: none;
}

到你的身体。