[仅适用于Safari的CSS错误

Question

我已经整理了投资组合页面的草稿，以此作为构建它的起点。一切在Chrome和Firefox上都能正常运行，但在Safari中，顶部导航栏向右倾斜（屏幕截图位于https://i.imgur.com/KcL45wY.png）。

检查元素，最有可能更改它的选择器是一个称为items-container的选择器，但微调是值不能解决问题。滚动查看继承关系会导致另一个选择器nav-items。但是，如果在那里进行任何更改，其他浏览器中的显示都会受到影响。

我不是CSS专家，但是我通常会设法正确地进行设置，但是我不知道可能是什么问题（应该是Safari的问题），更不用说以相同的方式解决它了任何浏览器中的方式。我用源代码（https://codepen.io/gobbet/pen/PoqYvbr）创建了一个Codepen，并想寻求有关该问题的见解（我认为应该很简单）。预先感谢所有人的可用性。

Answer 1

在Safari中，left的默认值不为0。

.items-container {
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0; /* <- */
  width: 100%;
  z-index: 10;
}

Answer 2

将left: 0;添加到.items-container

并非所有浏览器都将绝对元素定位在父元素的0 0上