为何共享CSS的HTML页面Header与Footer样式和组员不一致？

• 先查浏览器默认样式
  不同浏览器的默认样式（比如body的margin、header标签的默认padding）可能引发差异。别直接修改共享CSS，先在自己页面的<style>标签里临时添加全局重置代码测试：

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

  如果样式恢复正常，说明是默认样式差异导致的，后续可以和团队统一添加基础重置规则。

• 核对HTML的细微差异
  别仅凭“完全复制”的判断，实际对比你和组员的HTML代码：

  • 有没有标签嵌套错误（比如header里多套了一层div、漏写闭合标签）
  • 是否不小心给header/footer添加了独有的类名/ID
  • 甚至空格、换行的差异（极端情况下会影响内联元素布局）
    直接用文本对比工具比对两份代码，比肉眼排查更准确。

• 用开发者工具排查CSS优先级冲突
  按F12打开浏览器开发者工具，选中header/footer元素：

  • 查看Elements面板的Styles标签，看哪些样式被划掉，找到覆盖它的规则（可能是你页面额外添加的style标签、内联样式，或是其他引入的CSS文件）
  • 切换到Computed标签，查看最终生效的margin、padding、尺寸数值，和预期值做对比。

• 确认盒模型设置是否一致
  盒模型的box-sizing属性不同，padding和margin的计算逻辑会完全不一样。在开发者工具里查看元素的box-sizing值，若你的是content-box而组员是border-box，就会导致布局差异。可以临时给元素添加box-sizing: border-box测试效果。

• 强制清除浏览器缓存
  浏览器可能缓存了旧版本的CSS文件，导致你加载的样式和组员不一致。按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，或者在开发者工具的Network面板勾选“禁用缓存”后再刷新。

• 排查浏览器扩展的干扰
  部分广告拦截、样式修改类的浏览器扩展会偷偷篡改页面样式。用隐私模式打开页面测试，若样式恢复正常，就逐个禁用扩展找出问题所在。

• 检查DOCTYPE声明
  页面顶部的DOCTYPE声明不一致，会触发浏览器的怪异模式，直接导致布局混乱。确认你和组员的页面顶部都有正确的声明：

  <!DOCTYPE html>
  

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