CSS密码框切换图标在Firefox/IE中定位异常求助

Hey there! Let's sort out why your password show/hide icons are acting up in Firefox and IE—this is a common cross-browser quirk for new devs, so don't worry, we'll get it fixed.

What's Causing the Problem? #

Looking at your code, two key issues are breaking the positioning:

1. Mismatched positioning context: Your CSS targets .confirm-password (a class) but your HTML uses id="confirm-password"—so that position: relative rule isn't actually applying. Worse, the password container (#password) doesn't have any relative positioning at all. Without a position: relative parent, absolute-positioned elements like .icon will default to positioning relative to the entire page, which behaves differently across browsers.
2. Unreliable translation method: Using transform: translate3d(-140%,40%,0) is finicky across older browsers. Percent-based translations here depend on the element's own size, which can shift unexpectedly in Firefox/IE.

The Fix #

Let's rewrite your CSS to use a more stable, cross-browser approach:

Updated CSS Code

/* Apply relative positioning to the direct parent of each input + icon pair */
#password > div, #confirm-password > div {
  position: relative;
}

.icon {
  position: absolute;
  /* Pin the icon to the right side of the input box */
  right: 10px;
  /* Vertically center the icon */
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  /* Make the icon feel clickable */
  cursor: pointer;
}

/* Ensure your hide class works as expected (adjust if needed) */
.hide {
  display: none;
}

Why This Works #

• Correct positioning context: By adding position: relative to the div that wraps both the input and icons, we tell the absolute-positioned .icon elements to position themselves relative to that container—not the whole page. This works consistently across all browsers.
• Stable centering: Using top: 50% + transform: translateY(-50%) is a universally supported way to vertically center elements, even in IE11 and older Firefox versions. The right: 10px keeps the icon fixed to the input's right edge, no weird percentage shifts.
• Better UX: Adding cursor: pointer makes it clear to users that the icon is interactive.

Quick Check #

Double-check that your .hide class is properly hiding the icon (using display: none is the most reliable way for show/hide toggles). Your JavaScript for switching the hide class between #show-pwd/#hide-pwd should work fine once the positioning is fixed.

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