CSS媒体查询和Firefox的滚动条宽度 [英] CSS Media Queries and Firefox's Scrollbar Width

问题描述

可能重复：

CSS媒体查询问题（滚动条）

Firefox在其窗口宽度计算中包括滚动条宽度，Webkit不在其中。这会导致浏览器之间的不一致。

So, Firefox includes the scrollbar width in its window width calculation, where was Webkit does not. This results in an inconsistency between browsers.

现在，我知道Firefox技术上是通过计算滚动条作为窗口宽度的一部分遵循规范，但这似乎真的counter - 直觉对我。毕竟，移动设备没有滚动条，滚动条的宽度因浏览器/操作系统到操作系统而异。

Now, I know that technically Firefox is following the spec by calculating the scrollbar as part of the window width, but this seems really counter-intuitive to me. After all, mobile devices don't have scrollbars, and scrollbar width varies from browser to browser / OS to OS.

我可以做些什么来防止Firefox包括滚动条宽度？也许一个jQuery，将允许我的媒体查询在不同浏览器之间正确启动？

Is there anything I can do to prevent Firefox from including the scrollbar width? Perhaps a piece of jQuery that will allow my media queries to fire correctly across browsers?

谢谢。

推荐答案

如果您只是使用媒体查询，则侧边栏的偏移量将不会在浏览器之间产生任何差异。

If you are just using media queries, then the offset from the sidebar won't make any difference between browsers.

尝试使用jQuery与媒体查询，但是，您可能会遇到一些小问题，因为在jQuery返回的宽度是一致的，然后偏移将显示。

If you are trying to use jQuery with a media query however, you may run into some small problems as the widths returned in jQuery are consistent, and the offset will then show.

这只是需要计算侧边栏在Firefox Firefox浏览器的偏移量，并从任何你想同步的点减去。即

To fix this you simply need to calculate the offset of the sidebar in firefox browsers and subtract that from whatever point you wanted to syncronize at. i.e.

var scrollBarWidth = 0;
if ($.browser.mozilla)
  scrollBarWidth = window.innerWidth - jQuery("body").width();

稍后指定同步...

if ($(window).width() < mediaQueryWidth - scrollBarWidth) {
  //act to do along with the media query
}

希望这有帮助

这篇关于CSS媒体查询和Firefox的滚动条宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！