Question

编辑：屏幕截图见底部：

我只是想知道是否有人遇到过类似的问题。在我的机器，Windows 8和最新版本的Chrome上，我的选择框选项都看起来像我期望的垂直间距。在我旁边的开发人员上，同样运行Windows 8并使用相同版本的Chrome，选择框选项似乎在填充的顶部和底部有5px。代码在我们的开发服务器上，因此我们访问相同的文件。

这是一个jsfiddle在其他开发人员的机器上重现问题：http://jsfiddle.net/3etfP/

这是一个测试案例（同一个jsfiddle）：

<style type="css">
    .select {
        padding: 3px;
        color: #000;
    }
</style>    

<div>
   <select name="testSelect" id="testSelect" class="select">
       <option value="-1">Select One</option>
       <option value="0">No</option>
       <option value="1">Yes</option>
   </select>
</div>

其他一些可能有用的细节：

两者都运行Windows 8.0 64位
均使用桌面模式
均使用Google Chrome 版本30.0.1599.101 m
使用以下Chrome扩展程序：
- URL-alizer（两者）
- Google环聊（两者）
- Gmail收件箱（我）
- Any.do（其他开发者）
- 快速笔记（其他开发）
- Google文档（两者）

如果有任何我错过的细节，请告诉我。

由于

使用填充选择：

Select with padding

选择正常显示：

Select appearing normally

Answer 1

斯科特，

如果这是非常重要的事情，你可以模仿带有div的select的行为并且有更好的控制。据说它可能不是填充，您是否尝试在margin: 0元素上设置<option>？

.select option {
  padding: 0;
  margin: 0;
}

大多数元素在不同的浏览器中都有自己的填充/边距。如果您想在所有浏览器中进行统一设计，我建议您使用CSS重置（请参阅here）。也可能是你们中的任何一个让Chrome放大了。你们两个都应该按住control并按+或-以确保缩放设置为100％。

修改我想你很遗憾。请参阅Chris Coyier的文章Dropdown Default Styling，尤其是文章的后半部分，其中大部分内容都在这里引用。

下拉菜单本身怎么样？

就像在激活时显示选择的东西一样。就我而言   知道，没有办法在任何浏览器中设置这些样式。甚至没有大胆或   斜体。你可以得到最接近风格的东西就是将它们分组   使用。这可能主要是UI的东西，但它可能是   一个安全的事情。你不希望人们做一些棘手的事情   使用字体使得不清楚选择了哪个选项。

如果您想要完整的设计控制怎么办？

首先，尝试一切可以做到的不必要的事情。默认表格   元素很熟悉，效果很好。制作下拉菜单匹配   您的品牌的字体和颜色通常不是必需的，而且更多   最糟糕的可能是令人讨厌的，最糟糕的是用户体验。

如果你认为定制一个绝对是个好主意   下拉列表，那么你应该使用JavaScript来：



可以隐藏原始选择。



使用自定义标记（可能是定义列表）重建select，您可以根据需要设置样式。



复制默认选择的所有功能，包括：键盘事件，如向上和向下箭头键，并返回到   选择，滚动长列表，选择时向上打开菜单   屏幕下方，仅举几例。



对于移动设备，触发打开本机选择菜单，因为该功能几乎无法复制。例如，   iOS翻转轮。



您可能还想考虑桌面的“点击”风格。默认情况下，选择是自定义样式，但单击时   它，它打开本机下拉菜单（就地）。当你选择一个   选项它会再次显示自定义样式，并显示选项。


这是很多工作，容易搞砸，所以要小心。

约书亚

Answer 2

由于它是相同的操作系统和相同的浏览器，我会查看用户样式表：

Windows：\ User Data \ Default \ User StyleSheets \ custom.css
Linux：〜/ .config / chromium / Default / User StyleSheets / Custom.css
（我知道你们都在Windows上，只是为读者提供基础）

过去我将使用元素检查器在呈现页面后检查差异。一个总是以填充等方式阻碍我的CSS属性是盒子大小。

Chrome会添加垂直填充以选择不同计算机上的选项

2 个答案:

下拉菜单本身怎么样？

如果您想要完整的设计控制怎么办？