页面点击或浏览器resize时select列表文本位置偏移修复求助

页面中的<select>输入框，初始加载后“Player”文本对齐正常，但点击页面任意位置或调整浏览器窗口大小时，文本会轻微向下偏移。使用W3.CSS框架及自定义CSS，相关代码如下：

自定义CSS属性 #

-webkit-text-size-adjust: 100%;
box-sizing: inherit;
font: inherit;
margin: 0;
text-transform: none;
border-right: 1px solid #ccc!important;
color: #000 !important;
background-color: #f5f7f8 !important;
padding: 8px 16px;
float: left;
border: none;
display: block;
outline: 0;
height: 30px;
width: 120px;
border-radius: 5px 0px 0px 5px;

select输入框代码 #

<select class="w3-select w3-bar-item w3-theme-l5 w3-border-right" name="search_kind" style="height: 30px; width:120px; border-radius: 5px 0px 0px 5px;">
  <option value="1" selected="">Player</option>
  <option value="2">Alliance</option>
</select>

1. 强制垂直对齐并修正内边距/行高 #

问题核心是容器高度（30px）和上下内边距（8px*2）的总和超出容器高度，交互或窗口调整时W3.CSS的动态样式会干扰文本对齐。直接强制对齐并调整内边距：

select.w3-select {
  vertical-align: middle !important;
  padding: 0 16px !important; /* 移除上下内边距，避免内容溢出 */
  line-height: 30px !important; /* 行高与容器高度一致，保证垂直居中 */
}

2. 统一盒模型并消除浮动冲突 #

自定义CSS中的float: left可能和W3.CSS的布局逻辑冲突，改为inline-block并强制盒模型统一：

select.w3-select {
  box-sizing: border-box !important; /* 内边距和边框计入总高度，避免尺寸混乱 */
  display: inline-block !important;
  float: none !important;
}

3. 清理重复样式定义 #

内联样式中的height和width与自定义CSS重复，删除内联样式，统一在CSS中管理，避免优先级混乱：

<select class="w3-select w3-bar-item w3-theme-l5 w3-border-right" name="search_kind">
  <option value="1" selected="">Player</option>
  <option value="2">Alliance</option>
</select>

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