html - Chrome 中的媒体查询关闭了大约 20 像素

Question

我正在创建一个响应式网站。我的媒体查询在 Safari 中运行良好，但在 Chrome 和 Firefox 中我得到了额外的 20px 左右，这导致在进入“移动模式”之前弹出水平滚动条，这导致我的列扩展到 100%。

我的媒体查询说当达到 540px 时将列扩展到 100%，但 Chrome 似乎出于某种原因喜欢等到 520px。我想知道我忘记的一些 margin 是否仍然存在。我可以为你们上传我的网站:http://dustindowell.com/site .

我的媒体查询在这里，但我不认为这与额外的空间有任何关系。

@media (orientation:portrait){
    div.pageContainer,
    div.bannerTitle{ width:auto;}

    div.mainColumn{
        width:-webkit-calc(100% - 1.5em);
        width:        calc(100% - 1.5em);
        box-shadow:0 .125em 0 0 hsla(0,0%,0%,.1);}

    div.postPreviewContainer{
        width:-webkit-calc(100% - 1.5em);
        width:        calc(100% - 1.5em);}

    div.toggler{
        margin-top:1.5em; /* makes room for banner title */
        margin-bottom:1.5em;} /* pushes down banner title */

    div.sideColumn{
        width:-webkit-calc(100% - 1.25em);
        width:        calc(100% - 1.25em);}
}

@media (orientation:portrait)
and (min-width:540px) and (max-width:1080px){
    div.postPreviewContainer{
        width:-webkit-calc((100% / 2) - 1.5em);
        width:        calc((100% / 2) - 1.5em);}
}

Answer 1

事实证明，chrome 和 firefox 不包括滚动条作为宽度的一部分，而 safari 则包括。我不喜欢这种行为，我必须看看我能做些什么来解决它。