css - 浏览器与媒体查询触发点的差异

Question

我注意到媒体查询断点在 Chrome 中的触发方式与所有其他浏览器(IE9、Chrome、Opera)不同。

引用以下截图帮助解释(请忽略占位图片)。首先，断点在 chrome 中:

现在，让我们在下方查看所有其他浏览器的媒体查询触发位置。我们将以 Firefox 为例，但 IE9 和 Opera 是一样的。

区别:

1. 在 chrome 中，媒体查询的触发点是 1190px。在所有其他浏览器中，触发点位于 1173px。差异是 17px。

2. 17px也是浏览器实际宽度的区别本身。那是什么意思？我在 Chrome 和 Firefox 上对媒体查询触发前后的点进行了截图。在 photoshop 中，我使两种浏览器的 jpg 图像宽度保持一致。出于某种原因，媒体查询在除 Chrome 之外的所有浏览器中都会提前 17px 触发。

实际的媒体查询CSS代码:

@media (min-width: 1190px) and (max-width: 1254px) {

    .visible-large {
        display: inherit !important;
    }

}


@media (max-width: 1189px) {

    .visible-large {
        display: none !important;
    }

}

我的问题:有没有办法让媒体查询在所有浏览器中同时触发？

Answer 1

我认为某些浏览器可能会计算溢出宽度。