html - 样式选择在 Chrome 或 Firefox 上显示不一样

Question

我在使用 Chrome 和 Safari 设置选择框样式时遇到问题，但在 Firefox 上工作正常。

.first-selects {
  width: 184px;
  height: 24px;
  overflow: hidden;
  background: url(../images/select.png) no-repeat right #fff;
  border: 1px solid #9ca4ab;
  margin-bottom: 8px;
}
.first-selects select {
  background: transparent;
  width: 204px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 24px;
  -webkit-appearance: none;
  color: #686868;
  font-size: 12px;
  font-weight: 600;
  line-height: 44px;
  padding-left: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
}

<div class="first-selects">
  <select id="idcategory">
    <option value="-1">Category</option>
  </select>
</div>

我真的不知道为什么它们在 Chrome/Safari 和 Firefox 上看起来如此不同

Answer 1

这是你的 line-height 设置它等于 select 的高度:

.first-selects select {
  background: transparent;
  width: 204px;
  border: 0;
  border-radius: 0;
  height: 24px;
  line-height: 24px; //change to 24px to match the height
  -webkit-appearance: none;
  color: #686868;
  font-size: 12px;
  font-weight: 600;
  padding-left: 2px;
  padding-left: 4px;
}

FIDDLE

仅供引用，您在上面发布的脚本中有错字:

<div class="firt-selects">

应该是:

<div class="first-selects">