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

Posted 2023-02-24

【中文标题】Chrome 添加垂直填充以选择不同计算机上的选项

【英文标题】：Chrome adds vertical padding to select options on different computers

【发布时间】：2013-11-15 07:47:03

【问题描述】：

编辑：屏幕截图见底部：

我只是想知道是否有人遇到过类似的问题。在我的机器、Windows 8 和最新版本的 Chrome 上，我的选择框选项在垂直间距方面看起来都符合我的预期。在我旁边的开发人员中，也使用相同版本的 Chrome 运行 Windows 8，选择框选项似乎有 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 位 两者都使用桌面模式 两者都使用版本 30.0.1599.101 m 的 Google Chrome 使用以下 Chrome 扩展程序： URL-alizer（两者） Google 环聊（两者） Gmail（我）的正确收件箱 Any.do（其他开发） 快速笔记（其他开发） Google 文档（两者）

如果我遗漏了任何细节，请告诉我。

谢谢

使用填充选择：

选择正常出现：

【问题讨论】：

能否贴出正确和错误渲染的截图？

刚刚添加了一些屏幕截图。 @YuriyGalanter

看起来完全不同的渲染，它曾经渲染下拉up。你确定第二个第一个版本没有一些选择“更漂亮”吗？

嗯，我能想到的 2 个屏幕截图（除了填充）之间的唯一区别是第一张图片是从 13" 笔记本电脑上拍摄的。下拉菜单出现在选择上方的原因是因为它没有空间去下面。据我所知，没有人选择“更漂亮”。@YuriyGalanter

ScottMichael，您在哪里可以找到解决此问题的方法？ Chrome 似乎仍然存在此问题。

【参考方案1】：

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

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

过去我会在页面呈现后使用元素检查器检查差异。一个 CSS 属性总是妨碍我使用填充等，是 box-sizing。

【讨论】：

嘿@MakR。感谢您的回复！我检查了两台机器上的两个 custom.css 文件，它们看起来都是空白的。我们还比较了 html 和 CSS 后页面渲染，一切看起来都一样。即使是原始帖子中的 JSFiddle 链接也是最简单的 HTML/CSS，但它的反应方式仍然相同。

我必须同意 Joshua Robinson 的回答编辑。我无法真正复制相同浏览器相同操作系统在另一个副本上呈现不同的情况。另外，如果您还没有这样做，请选中 box-sizing：w3schools.com/cs-s-ref/css3_pr_box-sizing.asp

【参考方案2】：

斯科特，

如果这真的很重要，您可以使用 div 模仿 select 的行为并进行更好的控制。话虽如此，它可能不是填充，您是否尝试在 <option> 元素上设置 margin: 0 ？

.select option 
  padding: 0;
  margin: 0;
 

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

编辑： 我认为你很不幸。 见Chris Coyier的文章Dropdown Default Styling，尤其是文章的后半部分，这里引用了大部分内容。

下拉菜单本身呢？

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

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

首先，尽一切可能使之成为不必要的。默认形式 元素是熟悉的并且运作良好。使下拉菜单匹配 您的品牌的字体和颜色通常不是必需的，而是更多 最好的情况可能令人讨厌，最坏的情况可能是糟糕的用户体验。

如果您认为定制一个 下拉菜单，那么您应该使用 javascript 来：

可访问地隐藏原始选择。

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

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

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

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

工作量大，容易搞砸，所以要小心。

约书亚

【讨论】：

您好 Joshua，感谢您的回复。事实上，我们已经尝试了一些方法，包括对选项进行边距调整，但不幸的是，似乎没有任何东西可以消除额外的填充。整个情况最奇怪的是，我们可以看到的一切在操作系统、浏览器和页面缩放/字体大小方面都是相同的。我们的产品中有数百个选择框，因此可能无法选择将它们更改为 div。我还应该提到这个问题导致 2 个底部选项被剪裁。 @约书亚罗宾逊

会不会是浏览器插件？啊，你已经提到了 :) 我仍然会尝试删除所有浏览器插件，浏览器插件是否都是相同的版本？

同样在干净的虚拟机上试一下，看看是否有同样的结果。我使用 browserstack，如果您浏览此处的 Microsoft 页面，他们可以免费试用。 modern.ie/en-us/virtualization-tools

据我所知，它们都是相同的版本，但我会尽量恢复浏览器本身的默认值。 @约书亚罗宾逊