0

Mac から見ると問題なく見える collection_select タグを使用していますが、Windows を実行している PC から見ると、次のように表示されます。

CollectionSelectFormat問題

両方のコンピューターで 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 を確認できます: https://guarded-dawn-5794.herokuapp.com/

ありがとう！

4

1 に答える 1

2

さまざまなプラットフォームで動的にサイズ変更された要素に対して Chrome によって行われるパディング計算で問題の 1 つに遭遇しました。この投稿をチェックしてください。

どうやってこのエラーを見つけたの？

セレクターでChromeを右クリック>要素を検査>右側の計算済みタブ-OSXとWindowsの結果を比較します。OSX では 0px のパディングが計算されますが (これは CSS によれば間違っています)、Windows では正しく計算され、10px に設定されます。

修正する方法は、CSS でセレクターのパディングを明示的に 0px に設定することです

于 2013-10-25T05:16:28.013 に答える