0

我使用了一个 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" } %>

我正在使用引导程序，适用于该标签的 css 是：

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

关于为什么会发生这种情况的任何想法？

如果您想实时查看它，可以在此页面底部附近看到有问题的 collection_select(s)：https ://guarded-dawn-5794.herokuapp.com/

谢谢！

4

1 回答 1

2

您遇到了 Chrome 为不同平台上的动态大小元素进行的填充计算的问题之一。签出这篇文章。

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

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

解决方法是在 CSS 中将选择器的填充显式设置为 0px

于 2013-10-25T05:16:28.013 回答