相同CSS代码下邮箱与密码输入框渲染样式不一致问题排查

算力阿峰

2026-9-1

问题原因

两个输入框显示不一致完全是CSS选择器书写错误+样式意外覆盖导致的，和className本身的拼写无关，具体问题点：

你写的.sub-main.data.email、.sub-main.data.password两个选择器存在语法逻辑错误：CSS中类名直接连写（无空格分隔）代表匹配同时拥有所有这些类名的单个元素，但你的DOM是三层嵌套结构：类名为sub-main的div包裹类名为data的div，后者才包裹类名为email/password的输入框，这种结构下连写的选择器根本无法正确命中目标元素。
你给这两个错误选择器设置了width: 30px、height: 100px、position: absolute这类和输入框基础样式完全冲突的属性——这部分样式你本来是写给输入框前置图标的，但你HTML里根本没有添加对应的图标元素，一旦实际代码中存在选择器书写疏漏（比如类名之间误加空格变成后代选择器、类名误加到输入框上），这部分冲突样式就会直接覆盖全局input规则设置的300px宽、50px高的正常样式，直接把邮箱输入框挤成窄条。
你没有做全局样式重置，type="text"和type="password"输入框在不同浏览器下存在默认内边距、字体渲染的原生差异，再加上没有统一盒模型规则，会进一步放大显示不一致的问题。
额外冗余问题：你定义的.username、.second-input两个类的样式，在现有HTML结构中没有任何元素使用，属于无效代码。

修复步骤

按以下修改即可保证两个输入框样式完全一致：

首先删除三段无效的图标样式代码：.sub-main.data.email、.username、.sub-main.data.password对应的所有CSS规则。后续如果要加输入框前置图标，给图标元素单独设置专属类名写样式，不要和输入框类名、容器类名混写选择器。
增加全局样式重置，统一盒模型和默认边距，消除浏览器原生样式差异：

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

给两个输入框添加统一的业务类名，避免用全局input标签选择器写样式（容易污染页面其他输入框），同时给输入框加统一内边距和字体大小，避免placeholder贴边、字体渲染差异：

.form-input {
  width: 300px;
  height: 50px;
  border-radius: 60px;
  box-shadow: inset 0px 0px 25px 0px #888;
  border: none;
  outline: none;
  background-color: #fff;
  padding: 0 20px;
  font-size: 16px;
}

对应修改HTML里的输入框部分，把原来的email/password类名换成统一的form-input，同时给密码输入框的外层容器加上你已经写好的second-input类，给两个输入框留出统一间距：

<div className="data">
  <div>
    <input onChange={(e)=> setEmail(e.target.value)} type="email" placeholder="Adresse email" className="form-input" />
  </div>
  <div className="second-input">
    <input onChange={(e)=> setPassword(e.target.value)} type="password" placeholder="Mot de passe" className="form-input" />
  </div>
  <div>
    <div className="login-button">
      <button type="submit">Connexion</button>
    </div>
  </div>
</div>

异常渲染效果参考：
渲染效果截图

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