Html 选择表单元素内部文本间距

我在-webkit和其他浏览器之间的select元素上发现了这种不一致的行为。元素内文本的间距与其他输入元素不一致。（见示例）。选定对象在左侧有额外的~2px间距。因此不能与上面的输入元素水平对齐

Chrome工作正常，元素中的文本水平对齐

Firefox无法与上面的输入完全水平对齐

元素上的填充是相同的。只有我无法解释的间距存在于select元素中，而不是在webkit浏览器上。我已经登记了：

• Safari（无填充对齐良好）
• 镀铬（无填充，对齐良好）
• 火狐
• 边缘
• IE11

FF、Edge和IE11都有（对我来说）无法解释的间距。没有文本缩进，我找不到任何东西可以解释这个额外的空间

这里是我的（简化）css，用于输入和选择

html{
字体大小：93.75%；
线高：2；
最小高度：100%；
webkit文本大小调整：100%；
-ms文本大小调整：100%；
-moz osx字体平滑：灰度；
-webkit字体平滑：抗锯齿；
}
身体{
保证金：0；
填充：0；
位置：相对位置；
背景色：#fff；
}
* {
框大小：边框框；
}
.表格
{
背景#f1f1；
填充：15px；
利润率：30像素；
最大宽度：250px；
边界半径：3px；
}
.form__组+.form__组
{
边缘顶部：10px；
}
输入[type=“text”]、输入[type=“email”]、输入[type=“tel”]、输入[type=“password”]{
边框：1px实心#999；
填充：6.5px14px；
保证金：0；
宽度：100%；
边界半径：0；
-webkit外观：无；
行高：继承；
边界半径：3px；
高度：3雷姆；
字体大小：14px；
线高：24px；
}
挑选{
字体大小：14px；
线高：24px；
-webkit外观：无；
-webkit填充端：29px！重要；
-webkit填充开始：14px！重要；
-moz外观：无；
-o-外观：无；
外观：无；
边框：1px实心#999；
填充：6.5px29px 6.5px14px；
保证金：0；
宽度：100%；
大纲：0；
边界半径：3px；
背景：#fff；
颜色：#484A4E；
光标：指针；
高度：3雷姆；
背景尺寸：30px 50px；
背景位置：右中；
背景重复：无重复；
背景图片：url（数据：image/svg+xml；base64，PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJyB2aWV3Q…lszt0nzmlsbdojrezfnevdoycg9pbnrzpscxnswxnyaxmcwymiaymcwvpjvc3znpg=）；
}

示例选择
示例选择项
另一个

请遵循基本指南

* {box-sizing: border-box; padding: 0;margin: 0;}

---

在您的示例图像中，“无法解释”的空间在哪里？这两张照片对我来说都差不多<代码>：|它们都有相同的高度和宽度。我在这里没有发现任何奇怪的地方。在选择框的文本左侧有一个~2px的空格。它们在左边排列不整齐。虽然有相同的间距。将更新我的问题以更好地澄清问题抱歉，但这如何解决手头的问题，在尝试您的解决方案时，问题仍然存在。添加

填充：0；保证金：0没有帮助，因为填充和边距是在表单元素上设置的。据我所知，select元素中的文本本身不是html元素（如span或其他），因此应用*{…}不会影响内部文本，而只会影响select元素本身（尽管offcource会更改内部文本的位置，但它并没有澄清当前的问题）.我在Mozilla浏览器中看到，输入中显示了2px的输入。如果您仍然没有修复，请短时间共享两个浏览器屏幕。在小提琴中应用修复后，它仍然发生。看看我的原始问题，屏幕截图显示了Chrome中的“工作对齐和间距”，以及Firefox中的错误。您可以在FF中打开此小提琴（使用您的解决方案），与上面的输入元素相比，仍然可以看到2px左间距的问题。在Chrome/Safari中打开提琴可以显示表单元素中文本的正确对齐方式。这是Firefox浏览器的默认空间。如果你想删除你的firefox，你可以使用。我有小提琴的最新情况：