0

固定幅のテキストボックスがあります。ブラウザの互換性に苦労しています。Firefox で幅を修正すると、Chrome が適切に表示されず、右に行くほど長く表示されます。

更新された私のコード

HTML

<form name="welcomeDiv1" id="welcomeDiv1">
<tr class="unsortable" >

<tr>
 <td>
<input type="text" class="textbox_form" name="content" id="content" />
</td>

<td>
<input type="text" class="textbox_form2" name="content2" id="content2"/ >
</td>

 <td>
 <input type="text" class="textbox_form3" name="content3" id="content3"/ >
 </td>

 <td>   
  <input type="text" class="textbox_form4" name="content4" id="content4" />
  </td>

<td>
<input type="text" class="textbox_form5" name="content5" id="content5"/ >
</td>

<td>
 <input type="text" class="textbox_form6" name="content6" id="content6" />
 </td>  

<td> <input type="submit" class="textbox_form7"  value="+"  name="submit" class="globalinsert_button"/></td>

  </tr>
 </form>

CSS

.textbox_form {
               margin:0 0 0 1px;
               width:162px;
               height:30px;
               background-color:#C2FFC2;
    }
    .textbox_form2 {
              margin:0 0 0 -3px;
              width:329px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form3 {
              margin:0 0 0 -3px;
              width:386px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form4 {
              margin:0 0 0 -3px;
              width:138px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form5 {
              margin:0 0 0 -2px;
              width:158px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form6 {
              margin:0 0 0 -2px;
              width:204px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form7 {
             margin:0 0 0 17px;
    }

すべてのブラウザでテキストボックスをまったく同じ場所に配置する必要があります。しかし、それはまだ同じ問題のままです

4

4 に答える 4

2

スタイル属性が閉じていません。確認してください。

次のような個別のCSSスタイルを試してください:各テキストボックスにクラス「textbox_form」を追加します

<style>
    .textbox_form {
        margin-left: 5px;
        margin-top: 5px;
        width: 150px;
        background-color:#C2FFC2;
    }
    </style>

    <td>
    <input type="text" class="textbox_form" name="content" id="content" border:0px">
    </td>
于 2013-09-20T11:51:06.780 に答える
0

インライン スタイリングのマークアップが間違っています。次のように表示されます。

<input type="text" style="margin:0 0 0 -3px; width:386px; height:30px; background:#C2FFC2; border:none" name="content3" id="content3" />

また、外部 CSS スタイルシートを使用してください。そうしないと、多くのコードを繰り返すことになります。

于 2013-09-20T11:36:25.947 に答える
0

まず、あなたのコードは無効な HTML です。nameおよび属性はid、属性内に配置されているように見えstyleます。これは間違っており、コードを無効にしています。これは修正する必要があります。

次に、スタイルに別の CSS ファイルを使用することを強くお勧めします。これにより、繰り返しを避けることができ、同様のフィールドに同じスタイルを簡単に適用できます。

[編集] 上記の 2 点は、質問で修正されました。

最後に、クロス ブラウザの問題の最終的な原因は、おそらくページが Quirks モードでレンダリングされていることだと思います。ページの最初に有効な がない場合、ページは<!DOCTYPE>クワーク モードになり、ブラウザによってページのレンダリングが異なります。これ (およびその他の HTML エラー) を修正すると、ブラウザ間の一貫性が向上します。

于 2013-09-20T12:02:59.090 に答える
0

（対応する接頭辞box-sizing: border-boxとともに）を に設定します。これにより、デフォルトのブラウザーテーマのパディングなどが結果の寸法に影響を与えなくなり、要素が要素と同じボックスモデルに従うようになり(ほとんどのブラウザーではデフォルトで暗黙的になっています)、フォームのスタイリングが容易になります。-moz-input[type="text"]inputselecttextareabox-sizing: border-box

于 2013-09-20T12:04:09.360 に答える