10

私はこれで髪を失っています... HTML SELECT コントロールの幅を修正すると、ブラウザによって幅が異なるようにレンダリングされるようです。

複数のスタイルシートに頼らずにこれを標準化する方法はありますか?

これが私が取り組んでいるものです：

.combo
{
    padding: 2px;
    width: 200px;
}

.text
{
    padding: 2px;
    width: 200px;
}

これは、ページのドキュメント タイプです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

9 に答える 9

4

font-sizeレンダリング方法に影響を与える可能性がある選択も設定してみてください。min-widthおよびmax-widthプロパティも考慮してください。

于 2008-09-25T18:30:17.443 に答える
3

フォーム コントロールは、スタイルの試み、特に選択やファイル入力に対して常に従順ではありません。そのため、クロスブラウザーで確実にスタイルを設定し、将来の保証を念頭に置いてスタイルを設定する唯一の方法は、それらを JavaScript または Flash に置き換えて、それらの機能を模倣することです。

于 2008-09-26T19:56:58.277 に答える
2

input[type=text], select { ボーダー: solid 1px #c2c1c1; 幅: 150px; パディング: 2px; }

// それから

{ 幅: 156px; を選択します。// input[type=text] width + (border and padding) である必要があります }

/* 入力[タイプ=テキスト] 幅 = 幅 + パディング + ボーダー

選択幅は幅とちょうど同じです。パディングとボーダーは、その幅の制約内にレンダリングされます。それがSELECTのロール方法です...

*/

于 2011-02-21T18:36:51.937 に答える
1

フォームコントロールにはオペレーティングシステムによって異なる複雑なスタイルが多数あるため、ブラウザはCSSを使用してフォームコントロールをスタイル設定できる量を制限する傾向があります。CSSはそれを完全に説明できないため、ブラウザーはその一部を立ち入り禁止にします。

エリックマイヤーは、このテーマについて良い記事を書きました。

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

できる最善のことは、フォームフィールドの外観を完全に制御できないことを受け入れ、本当に重要なスタイルを試してみることです。

于 2008-11-25T17:56:22.533 に答える
1

デフォルトのマージンとパディングをすべて削除し、明示的に定義してください。適切な DOCTYPE を使用していること、したがって IE を標準モードでレンダリングしていることを確認してください。

于 2008-09-25T18:30:07.367 に答える
1

偽のドロップダウン ウィジェットを使用して、SELECT を置き換えることができます。

于 2008-09-25T18:32:04.193 に答える
0

私はこれらすべての提案を試しました...そして私はついにそれを手に入れたので、IEとFirefoxで見栄えがします。SELECTコントロールのパディングに問題があるようです。SELECTの幅を2ピクセル増やすと、サイズが正しくなります。 

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

ただし、Chromeはまだ同じサイズを表示しません。

于 2008-09-25T20:17:47.810 に答える
0

マルティネーターは正しいです。

クッパ全体でさまざまなタイプの入力またはメニューの幅を制御しようとしているようです。オブジェクトを直接選択して、幅を指定できます。例えば：

select {
  width:350px;
}

または、テキストエリアでこれを行うことができます：

select {
      width:350px;
}

他のタイプの入力には、Martinator が言及する構文が必要です。したがって、テキスト、入力、またはファイルタイプの入力の場合でも、それぞれに対してこれを行います。

input[type=text] {
      width:350px;
}

input[type=input] {
      width:350px;
}

input[type=file] {
      width:350px;
}
于 2012-04-25T23:07:56.293 に答える
0

Firebugまたは Chrome の「要素の検査」機能 (選択コントロールを右クリックし、「要素の検査」をクリック) を使用して、その特定のオブジェクトに対してどのスタイル プロパティが継承/レンダリングされているかを正確に確認してください。それはあなたを正しい方向に導くはずです。

于 2008-09-25T18:35:35.167 に答える