相同HTML与CSS代码在Chrome和Firefox中渲染效果不一致问题

你给出的媒体查询语法符合W3C标准，本身不会直接导致Chrome和Firefox的渲染差异，你遇到的跨浏览器不一致问题大概率来自以下几个常见原因：

• 浏览器默认样式差异：Chrome和Firefox内置的用户代理样式表规则不同，对无明确声明的元素margin、padding、行高、容器默认尺寸的赋值有区别，如果没有提前做CSS样式重置，会直接体现为渲染差异。
• 怪异模式触发：如果你的HTML代码开头没有添加<!DOCTYPE html>声明，浏览器会自动进入怪异渲染模式，两款浏览器的怪异模式逻辑完全不同，会出现大范围的布局偏移。
• 布局属性默认值差异：如果你用了Flex、Grid等现代布局，没有显式声明所有相关属性，两款浏览器对min-width、flex-shrink这类默认属性的处理在边缘场景下会有细微区别；如果未全局声明box-sizing: border-box，padding、border计入元素总宽度的计算也可能出现预期外的差异。
• 媒体查询触发时机不一致：如果两款浏览器的页面缩放比例不同，或者你开启了系统级DPI缩放，会导致视口宽度的计算结果出现偏差，刚好卡在800px阈值附近时，会出现一个浏览器触发了媒体查询、另一个没有触发的情况，看起来就是布局差异很大。

• 先添加全局样式重置，统一基础规则，示例代码如下：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

• 确认HTML开头有完整的<!DOCTYPE html>声明，确保两款浏览器都进入标准模式渲染。
• 给.widget-container添加明确的默认max-width值，不要仅依赖媒体查询赋值，避免浏览器自动计算的差异。
• 测试时统一两款浏览器的页面缩放比例为100%，排除缩放导致的阈值触发差异。

内容的提问来源于stack exchange，提问作者shAkur