html - 媒体查询在 Firefox 和 IE 中的工作方式不同

Question

好的，所以我的媒体查询在 chrome 中运行良好，但是当我在 firefox 或 ie 中尝试代码时，margin-top 或 margin-left 是不同的并且不像 chrome 中那样准确!

这是我使用的代码:

 @media screen and (max-width:800px) { 
    #box-move {
        margin-left:-20px;
        margin-top:40px; 
    } 
 }

那么firefox或者ie有什么特殊的技术吗？

谢谢。

Answer 1

这实际上根本不是 CSS 或 CSS 解释问题——这是 Firefox 调整(或不调整视口(viewport)大小)的方式。

与 Google Chrome 和大多数其他浏览器不同，Firefox 允许其工具栏影响视口(viewport)大小。在 Firefox 中使视口(viewport)调整到低于工具栏宽度的唯一方法是禁用它们。

您需要转到“查看”>“工具栏”并取消选中每个。然后尝试调整大小并观察您的媒体查询是否生效。

希望我解释正确。这是艰难的一天!