CSS границы в хром слишком толстый

Question

У меня проблема, которая возникает только в Google Chrome. Границы кажутся "слишком толстыми". В Firefox все кажется нормальным (я тестировал только в chrome и firefox).

Как вы можете видеть на изображении, есть 2 проблемы:

1) верхняя стрелка: границы толстые (1px solid #aaa). Когда я рисую таблицу с помощью CSS, границы нормальные. Это происходит только с полями ввода div и формы.

2) нижняя стрелка: фон внутреннего элемента немного выходит за границу внешнего элемента.

Может ли это быть ошибкой в ​​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 solid #aaa, граница divs = 1px solid #aaa, но границы таблиц намного тоньше, чем границы div.

Answer 1

Поскольку это происходит только в Chrome, это, вероятно, связано со стилем Chrome по умолчанию. Попробуйте добавить сброс CSS к документу или попробуйте добавить

* {
border: none;
}

к вашему телу.