3

まず、件名に「HTML ハックなし」と書いてあるのは、これらすべてのハックを 1 行にまとめる余裕がないからです。

私はこれらの質問に出くわしましたが、それらは私のニーズに応えません:

幅を持つ CSS 入力: 100% が親の境界の外に出
ます HTML テキスト入力とドロップダウン入力に同じ幅を設定する方法
100% 幅のテキスト ボックスがコンテナーを超えないようにすることはできますか?

いくつかの理由を次に示します。

  • ブロック要素が使えない
  • 入力は、テキストボックスのように見えるように、ベベル/インセット スタイルを保持する必要があります (ビジネスでは、周囲に 1 ピクセルの実線の境界線がある目立たない長方形は好まれません)。
  • CSS3 なし (まだ IE6 と IE7 を使用しているユーザーもいます)
  • 会社の Web サイトのすべての入力を魔法の DIV 要素でラップすることはできません。

<!DOCTYPE>このディレクティブが入力のオーバーフロー動作に影響することを発見しました。調査によると、このディレクティブがないと、ブラウザーは互換モードになります。それが、quirks モードで入力が見える理由だと思います... 正しいですか? 理解できません。

とにかく、ここにフィドルがあります：

http://jsfiddle.net/pJkGB/2/

腐敗の場合、そのフィドルの HTML は次のとおりです。

<input id="txtwoo" style="width:300px" type="text" />
<br />
<select id="cbowoo" style="width:300px">
</select>

テキスト ボックスがドロップダウンよりも広いことに注意してください。テキストボックスの外側の境界を、ドロップダウンのまったく同じ幅とピクセルまで一致させる必要があります(外側の境界には、境界線、マージンなどが含まれます)。ドロップダウンはそのままにしておく必要があります。入力を要素でラップしたくありません。テキスト入力自体に直接適用して、設定されたピクセル幅を超えないようにするスタイルが必要です。ベベル/インセット スタイルを維持したい。

それが無理なら「あなたにはできない」というあなたの答えで十分です。それ以外の場合は、私のフィドルをいじって、これを機能させる方法を教えてください。

4

1 に答える 1

7

使用してみてください：

input{
    box-sizing:border-box;
}

極端にやりたい場合は、以下を使用してテキスト ボックスにゼロインすることもできます。

input[type=text]{
    box-sizing:border-box;
}

このフィドルを見てください

于 2013-11-14T14:16:17.227 に答える