当窗口调整为最大宽度减去滚动条宽度时，Firefox 中的媒体查询丢失 [英] Media query lost in Firefox when window resized to max-width minus scrollbar width
问题描述
这是我第一次尝试响应式网站设计，但遇到了一个奇怪的问题，即在 Firefox 32 for Windows 7 中媒体查询在特定窗口宽度处丢失(到目前为止).
This is my first attempt at a responsive site design and have run into a weird issue where media queries are lost at particular window widths in Firefox 32 for Windows 7 (so far anyway).
当缓慢调整窗口大小时，它可能会导致断点处(主要是)无样式的内容闪烁.如果我仔细调整窗口大小，我可以达到断点之间的宽度.我最终看到的是默认样式，因为媒体查询在这两种情况下都丢失了.
When slowly resizing the window it can result in a flash of (mostly) unstyled content at breakpoints. If I carefully resize the window I can hit widths that are between breakpoints. I end up seeing the default styles as the media queries are lost in both cases.
例如，max-width 768px 是一个断点，当窗口大小调整为 767px 时，它应该加载一个新的媒体查询.在这种情况下，下一个向下的布局为 600 像素宽.
For instance, max-width 768px is one breakpoint and when the window is resized to 767px it should load a new media query. In this case, the next one down has a 600px-wide layout.
但是，在 Windows 7 的 Firefox 32 中，如果我能够将浏览器窗口设置为 767.4 像素宽，则不会加载新的媒体查询.
In Firefox 32 in Windows 7, however, the new media query isn't loaded if I'm able to make the browser window something like 767.4px wide.
当我检查代码时，计算出的 HTML 以十进制值显示宽度.这与我的其他浏览器不同，它们似乎都四舍五入为整数.
When I inspect the code, the computed HTML shows the width with a decimal value. This is unlike my other browsers which all seem to round to whole numbers.
我曾尝试更改使用 em、rems 或 px 值的样式和 HTML 媒体查询中的值.一些更改导致其他浏览器在断点之间出现类似问题.我发现使用像素宽度可提供最佳结果，但不能解决 FF32 问题.
I have tried changing values in my styles and HTML media queries that use either ems, rems or px values. Some changes have resulted in other browsers having similar issues between breakpoints. I've found that using pixel widths gives the best results but doesn't solve the FF32 issue.
这是 PHP 页面代码:
Here's the PHP page code:
<!doctype html>
<html lang="en">
<head>
<title>This is the title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="description" content="This is the description.">
<link rel="shortcut icon" href="favicon.ico">
<link rel="image_src" href="http://www.website.ca/image.gif">
<link rel="stylesheet" href="styles/styles-base.css">
<link rel="stylesheet" href="styles/styles-320.css" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link rel="stylesheet" href="styles/styles-480.css" media="only screen and (min-width: 480px) and (max-width: 599px)">
<link rel="stylesheet" href="styles/styles-600.css" media="only screen and (min-width: 600px) and (max-width: 767px)">
<link rel="stylesheet" href="styles/styles-768.css" media="only screen and (min-width: 768px) and (max-width: 959px)">
<link rel="stylesheet" href="styles/styles-960.css" media="only screen and (min-width: 960px) and (max-width: 1223px)">
<link rel="stylesheet" href="styles/styles-1224.css" media="only screen and (min-width: 1224px)">
<link rel="stylesheet" href="webfonts/ss-standard.css">
<?php include("includes/head_typekit.php")?>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="scripts/mobilenav.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body id="page-overview">
<div id="wrapper">
这里是来自styles-base.css的相关默认样式:
Here are the related default styles from styles-base.css:
body {
background-color: #eaf6f8;
font-family: "ff-meta-web-pro", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 100%;
}
/* . . . */
#wrapper {
background-color: #fff;
margin: 0 auto;
overflow: hidden;
position: relative;
}
以下是其中一个样式表的示例，所有样式表均采用此方法:
Here's an example from one of the stylesheets, which all follow this approach:
#wrapper {
width: 1224px;
}
关于如何解决此问题或在需要修复时改进我的代码的任何建议?
Any suggestions on how to solve this or to improve my code if it requires any fixing?
推荐答案
这不是错误，而是功能.
It's not a bug, it's a feature.
Firefox 在子像素级别解释媒体值，例如不是整数值，而是浮点值.因此，X 的 min-width 和 X+1 的 max-width 之间存在 1px 的间隙，此处没有定义适用.可以在子像素级别设置视口的大小似乎违反直觉，但请考虑放大的效果，其中像素值乘以给定因子.
Firefox interprets the media values on a sub-pixel level, e.g. not as an integer value but as a floating point value. Therefore, a gap of 1px exists between a min-width of X and a max-width of X+1, where no definition applies. It seems counterintuitive that it is possible to set the size of the viewport on a sub-pixel level, but think about the effect of magnification, where the pixel value is multiplied with a given factor.
由于媒体选择器不提供任何>"或<"运算符，您必须将最大宽度设置为 X+0.01 而不是 X+1.尽管这种变通办法留下了 0.01 像素的间隙，但可以合理地假设它永远不会出现.
As the media selector doesn't provide any ">" or "<" operators, you have to set the max-width to X+0.01 instead of X+1. Although this workaround leaves a gap of 0.01 pixel, one can reasonably assume that it will never show up.
当然你也可以使用 X+0.000001...如果这能让你安心;-)
Of course you can also use X+0.000001... if that gives you peace of mind ;-)
这篇关于当窗口调整为最大宽度减去滚动条宽度时，Firefox 中的媒体查询丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
