鼠标悬停.mdcancel元素时inpname输入框左移的技术问题排查

这个问题其实是浏览器渲染机制里的一个小坑，和合成层创建以及亚像素布局计算有关，我来给你拆解清楚：

先看你的场景核心 #

你的代码里：

• 输入框是块级元素，宽度用calc(100% - 20px)计算，靠margin:auto水平居中
• .mdcancel是左浮动元素，在输入框下方

当你给.mdcancel:hover加opacity:0.8时，就触发了浏览器的一个优化行为：只要元素的opacity小于1，浏览器会自动把它放到独立的合成层，用GPU加速渲染。

为什么合成层会导致偏移？ #

合成层元素的渲染流程和普通元素不一样，在布局计算时，合成层元素的位置可能会因为亚像素（比如0.5px这种非整数像素）的渲染规则，给父容器#mdedit带来极其细微的布局变化。而你的输入框宽度是基于父容器的100%计算的，这种细微变化就会传递到输入框，看起来就是输入框向左偏移了。

但如果你把opacity换成background这类样式，就不会触发合成层创建——元素还是在正常的渲染流里，布局计算都是基于稳定的规则，自然不会出现偏移。

怎么解决这个问题？ #

有几个简单的办法可以规避这个现象：

1. 提前给浮动元素声明will-change

告诉浏览器这个元素的opacity会变化，让它提前创建合成层，避免hover时的布局突变：

.mdcancel { 
  float: left; 
  will-change: opacity; /* 提前告知浏览器 */
}
#mdedit input[type='text'] { 
  display: block; 
  width: calc(100% - 20px); 
  margin: 7px auto; 
  border: 1px solid #999; 
}
.mdcancel:hover { opacity: 0.8; }

2. 让父容器也进入合成层

强制父容器#mdedit加入合成层，这样浮动元素和父容器在同一个渲染上下文里，布局计算就不会有差异：

#mdedit { 
  transform: translateZ(0); /* 强制创建合成层 */
}
.mdcancel { float: left; }
#mdedit input[type='text'] { 
  display: block; 
  width: calc(100% - 20px); 
  margin: 7px auto; 
  border: 1px solid #999; 
}
.mdcancel:hover { opacity: 0.8; }

3. 给输入框添加相对定位

让输入框的布局脱离父容器的细微影响：

.mdcancel { float: left; }
#mdedit input[type='text'] { 
  display: block; 
  width: calc(100% - 20px); 
  margin: 7px auto; 
  border: 1px solid #999; 
  position: relative; /* 脱离父容器布局影响 */
}
.mdcancel:hover { opacity: 0.8; }

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