Chrome布局异常修复咨询：Bootstrap列宽与下拉框渲染问题

我之前也碰到过Chrome和其他浏览器在表单元素渲染上的差异问题，结合你的代码来看，问题主要出在Chrome对-webkit-appearance: button的特殊处理，以及盒模型计算和其他浏览器不一致，再加上col-sm-1本身宽度有限，下拉框的内边距、自定义箭头伪元素挤在一起导致布局错乱。下面是几个针对性的修复方案：

方案1：统一盒模型计算 #

给下拉框的select元素加上box-sizing: border-box，这样内边距不会额外增加元素的总宽度，避免超出col-sm-1的容器：

.custom-dropdown select {
  background-color: #00c292;
  color: #fff;
  font-size: inherit;
  padding: .5em;
  padding-right: 2.5em;
  border: 0;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: '';
  -webkit-appearance: button;
  box-sizing: border-box; /* 新增这行 */
  width: 100%; /* 让select占满容器宽度 */
}

方案2：替换-webkit-appearance属性，统一箭头渲染 #

Chrome的-webkit-appearance: button会给select添加默认的按钮样式，导致宽度计算偏差。我们可以换成-webkit-appearance: none，完全用自定义的伪元素来模拟下拉箭头，这样所有浏览器的表现会更一致：

.custom-dropdown select {
  background-color: #00c292;
  color: #fff;
  font-size: inherit;
  padding: .5em;
  padding-right: 2.5em;
  border: 0;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: '';
  -webkit-appearance: none; /* 替换为none */
  appearance: none; /* 加上标准属性 */
  box-sizing: border-box;
  width: 100%;
}

同时可以微调伪元素的位置，让箭头更贴合容器：

.custom-dropdown::after {
  content: "\25BC";
  height: 1em;
  font-size: .625em;
  line-height: 1;
  right: .8em; /* 从1.2em调整为.8em，避免超出容器 */
  top: 50%;
  margin-top: -.5em;
}

方案3：调整容器宽度（可选） #

如果col-sm-1的宽度确实不足以容纳下拉框，你可以考虑把容器换成col-sm-2，或者给col-sm-1添加自定义的最小宽度：

.col-sm-1.custom-select-container {
  min-width: 180px; /* 根据需求调整 */
}

然后在HTML里给容器加上这个类：

<div class="col-sm-1 custom-select-container">
  <span class="custom-dropdown dropdown-sm">
    <!-- select元素 -->
  </span>
</div>

把这些修改组合起来，Chrome里的布局错乱问题应该就能解决了，而且不会影响Firefox和Edge的正常渲染。

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