Angular 4表单CSS在Firefox中显示异常，Chrome正常问题求助

嘿，我之前也踩过Chrome和Firefox之间Flex布局兼容的坑，结合你给出的代码片段，给你几个针对性的排查和修复方案：

• 统一inline-flex元素的垂直对齐
  Chrome和Firefox对inline-flex元素的默认垂直对齐逻辑有差异，这大概率是布局错乱的核心原因。给你的两个inline-flex类加上垂直对齐属性：

  .RegisterTitle{ 
    padding-bottom: 5%; 
    display:inline-flex; 
    vertical-align: middle; /* 新增，对齐方式统一 */
  } 
  .Retour{ 
    display: inline-flex; 
    align-items: center; 
    vertical-align: middle; /* 新增 */
  }
  

• 修复height:100%的继承问题
  Firefox里height:100%必须依赖父元素明确设置高度才能生效，Chrome则会自动向上查找可继承的高度值。你需要给html和body补充高度样式，确保.centrer的高度设置能正确生效：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  

• 重置表单元素的默认样式
  不同浏览器对input等表单控件的默认padding、border、盒模型处理不一致，建议统一重置消除差异：

  input, select, textarea {
    box-sizing: border-box; /* 确保padding和border不会撑开元素宽度 */
    margin: 0;
    padding: 0.6rem; /* 自定义统一内边距 */
    border: 1px solid #ddd; /* 统一边框样式 */
  }
  

• 用Firefox开发者工具定位差异
  按F12打开Firefox的开发者工具，选中布局错乱的输入控件，对比Chrome中同一元素的盒模型（宽度、高度、margin、padding），看看有没有Firefox独有的额外间距或溢出，再针对性调整样式。

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