html - 元素宽度 : 100% out of screen

Question

我有一个奇怪的问题。我将顶部菜单设置为 width: 100%，但在加载时，它会超出屏幕(始终为 522px)。

调试

我在控制台中使用 debugger; 停止了页面加载。元素的计算宽度为 522px。单击它会将我带到 css width: 100%。除菜单外，页面中的所有内容都在页面宽度内。

CSS

#mobile_header {
    vertical-align: middle;
    position: fixed;
    background-color: #5d3026;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    z-index: 99998;
    box-sizing: content-box;
}

奇怪的部分
它仅在加载时超出范围。每当页面完成加载时，它都会变为正常的全屏大小的 100%。没有额外的 JS 影响这个。没有加载 CSS(页面加载暂停后)。我还删除了其中的所有内容，更改了 html 和 css 中的 ID(因此实际上没有脚本会影响它)，清除了缓存。仍然是奇怪的 522px(从 100% 翻译而来)。
我知道这是一个疯狂的镜头，但有没有人猜到什么会导致这种情况(在所有浏览器上)？

Answer 1

对于 fixed 元素，您可以使用 left: 0 和 right: 0 100% 宽度

#mobile_header {
    vertical-align: middle;
    position: fixed;
    background-color: #5d3026;
    top: 0;
    left: 0;
    right: 0; /* <= */
    height: 50px;
    z-index: 99998;
    box-sizing: content-box;
}