Chrome 102版本range输入框可点击垂直区域远超预期问题咨询

这个现象不属于Chrome 102.0.5005.63版本的浏览器bug，本质是<input type="range">原生表单控件的默认用户代理（UA）样式在不同渲染环境下的表现差异，根源是原生range控件的可点击热区默认没有和视觉展示的轨道做严格绑定。

• Chromium内核的默认UA样式中，range输入框的可点击响应区域本身就预留了比视觉轨道更大的垂直范围，这个设计是为了降低鼠标、触屏场景下的操作瞄准成本，从Chromium早期版本就一直存在，不是102版本引入的异常。
• 代码片段运行环境表现正常，是因为在线代码运行平台普遍自带全局CSS重置规则，覆盖了Chrome原生给range控件设置的默认内外边距、热区范围配置，和你本地无样式重置的页面渲染环境存在差异。
• 打开本地页面的开发者工具检查#sld_1元素就能看到，原生UA样式给控件加了默认上下内边距，元素整体盒模型高度远大于视觉上可见的滑块轨道高度，超出视觉部分的透明区域依然属于控件的响应范围，就会出现垂直可点击区域超出预期的表现。

你提供的测试代码本身没有逻辑问题，在无任何全局样式重置的空白HTML页面中直接运行即可复现你描述的现象：

<div id="div_1" style="background-color:rgb(200,200,200)">
    <input type="range" id="sld_1" min="1" max="100" value="100" style="width:100px">
</div>

如果需要将可点击区域严格限制在预期的垂直范围内，显式给range控件设置盒模型属性、重置原生appearance样式即可，参考代码：

input[type="range"] {
  margin: 0;
  padding: 0;
  height: 16px; /* 按实际需求设置控件整体高度 */
  -webkit-appearance: none;
  appearance: none;
}
/* 自定义滑块轨道样式，和热区范围匹配 */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #ccc;
  border-radius: 2px;
}
/* 自定义滑块手柄样式 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2196F3;
  margin-top: -6px; /* 对齐轨道位置 */
  cursor: pointer;
}

注意：如果不重置-webkit-appearance属性，Chrome会强制应用原生控件的渲染规则，手动设置的部分盒模型属性不会生效。

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