HTML/CSS：元素部分显示时hover触发自动滚动问题修复求助

我刚好碰到过Chrome 66这个奇怪的bug！当列表里每行首个只有部分可见的元素被hover时，浏览器会自动滚动，这是因为Chrome在处理元素高度变化的过渡时，错误地触发了视口滚动行为，试图让整个元素进入可见区域。你的布局里用了float和padding-bottom维持正方形比例，hover时p元素的max-height从0切换到600px，这种高度突变刚好触发了这个旧版本的bug。

解决方案 #

要修复这个问题，只需要给父容器添加简单的样式限制，阻止浏览器的自动滚动触发：

1. 给ul.category-blocks添加position: relative和overflow: hidden，把整个列表变成一个独立的包含块，内部元素的溢出变化不会影响页面级的滚动。
2. 给p元素补上overflow: hidden，确保内容展开/收起时的过渡更平滑，避免布局计算异常。

修改后的完整CSS代码 #

ul.category-blocks { 
  display:block; 
  margin:0; 
  padding:0;
  position: relative; /* 添加：将列表设为包含块 */
  overflow: hidden; /* 添加：限制内部元素溢出范围 */
} 

ul.category-blocks > li { 
  position:relative; 
  display:block; 
  list-style:none; 
  width:calc(33% - 10px); 
  padding:0 0 calc(33% - 10px) 0; 
  margin:0 5px 10px 5px; 
  float:left; 
  box-sizing:border-box; 
  background-color:orange; 
  background-position:center; 
  background-size:100% 100%; 
  overflow:hidden; 
  border:1px solid #ff5601; 
  transition:background 0.3s ease-in-out; 
} 

ul.category-blocks > li:hover { 
  background-size:105% 105%; 
} 

ul.category-blocks > li > div { 
  position:absolute; 
  background:rgba(249,91,0,0.7); 
  color:#fff; 
  left:0;right:0; 
  bottom:0; 
} 

ul.category-blocks > li:hover > div { 
  transition:background 1s ease-in-out; 
  background:rgba(249,91,0,0.9); 
} 

ul.category-blocks > li > div > h2 { 
  text-align:center; 
  font-size:20px; 
  font-weight:700; 
} 

ul.category-blocks > li > div > p { 
  margin:0; 
  padding:0 10px; 
  max-height:0; 
  font-size:12px; 
  text-align:justify; 
  transition:all 0.5s ease-in-out; 
  overflow: hidden; /* 添加：确保内容溢出时隐藏，过渡更平滑 */
} 

ul.category-blocks > li:hover > div > p { 
  max-height:600px; 
  margin-bottom:20px; 
} 

ul.category-blocks > li > div > p a.shop-button { 
  display:block; 
  padding:5px 10px; 
  margin:10px auto 0 auto; 
  text-align:center; 
  width:100px; 
  border:1px solid #fff; 
  color:#fff; 
} 

ul.category-blocks > li > div > p a.shop-button:hover { 
  background:#fff; 
  color:#ff5601; 
}

额外说明 #

• 如果添加overflow: hidden后出现列表底部内容被截断的情况，可以给ul.category-blocks设置一个合适的min-height，或者微调li的margin-bottom值来适配。
• 这个bug是Chrome 66版本特有的，后续官方版本已经修复，但如果需要兼容这个旧版本，上面的方案完全有效。

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