css - 使用 Windows 查看时，Rails collection_select 标签显示不正确，但在 OSX 中显示正常

Question

我使用的 collection_select 标签在 Mac 上看起来不错，但在运行 Windows 的电脑上看起来像这样:

我在两台计算机上都使用 Chrome，所以我惊讶地发现它们的显示方式不同。

标签看起来像这样:

<%= collection_select :matchup, :player_2, Player.order('full_name ASC'), :id, :full_name, {}, { :multiple => false, class: "matchupSearchField", id: "player_2_search_field" } %>

我用的是bootstrap，这个标签适用的css是:

.matchupSearchField {
  width: 200px;
  text-align: center;
}

关于为什么会发生这种情况有什么想法吗？

如果您想现场观看，可以在本页底部附近查看相关的 collection_select:https://guarded-dawn-5794.herokuapp.com/

谢谢!

Answer 1

您遇到了 Chrome 为不同平台上动态调整大小的元素所做的填充计算的问题之一。检查这个 post .

嘿，伙计，你是怎么发现这个错误的？

在 Chrome 中右键单击选择器 > 检查元素 > 右侧的计算选项卡 - 比较 OSX 和 Windows 之间的结果。在 OSX 上，您计算了 0px 的填充(根据 CSS，这是错误的)，而 Windows 正确地计算了它，设置为 10px。

解决方法是在 CSS 中将选择器的内边距明确设置为 0px