不同页面font size、padding、margin不一致，首页导航栏样式异常如何处理？

核心排查步骤 #

• 优先检查首页是否存在局部样式覆盖：首页常单独配置专属CSS文件、行内样式或页面内<style>规则，优先级高于全局公共样式，会覆盖你设置的统一font-size、padding、margin参数。可通过浏览器F12开发者工具选中导航栏元素，在「样式」面板查看生效属性，确认是否有被划掉的全局规则，以及上层生效规则的来源。
• 检查根字体大小是否一致：如果全局样式使用rem作为单位，不同页面若给html或body标签设置了不同的根字体大小，会导致所有rem单位的实际渲染尺寸出现差异。
• 检查公共样式引入是否正常：对比首页和其他正常页面的<head>标签内的样式文件引入列表与顺序，确认是否漏引公共导航样式文件，或是公共样式的引入顺序晚于首页局部样式，导致优先级不足无法生效。
• 检查是否做了统一样式重置：如果没有引入reset.css或normalize.css这类样式重置文件，不同页面的元素可能触发不同的浏览器默认UA样式，也会出现边距、字体尺寸表现不一致的问题，建议全局引入样式重置文件统一默认表现。

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