-2

HTMLとjQueryでオーダーフォームを作っています。[買い物リストに追加] ボタンを押す前に、顧客が指定しなければならないパラメーターがいくつかあります。ボタンが押されるとAddToBasket、顧客が選択したパラメーターを抽出し、買い物リストに行を追加する関数があります。

これは Chrome、Opera、Firefox では問題なく動作しますが、何らかの理由で IE では各行の周りに多くの垂直スペースが追加されます。各行には、通常 2 つの改行/改行を含む説明テキストが含まれます。前述のように、これらはほとんどのブラウザーで下にうまく表示されますが、IE では各行の周りに垂直方向のスペースが非常に多いため、リスト内の 2 つの行を同時に完全に表示することはできません。

私の買い物リストは、高さ 220 ピクセル、幅 450 ピクセルの HTML テーブルです。テーブルのコードは次のとおりです (div でラップしました)。

<div style="height:220px;width:450px;font:16px Courier New, Garamond, Serif;overflow:auto;border:2px solid #7AB800">
  <table width="100%" height=30px cellpadding="0" cellspacing="0" border="0" id="orderlist">
    <thead>
      <tr style="color:#FFFFFF" bgcolor="#7AB800">
        <th align="left" width="80">
          DELETE
        </th>
        <th align="left" width="80">
          NUMBER
        </th>
        <th align="left">
          DESCRIPTION
        </th>
        <th class="colMeterType">
           Meter type
        </th>
        <th class="colModuleType">
           Module type
        </th>
        <th class="colOrderOrQuote"></th>
      </tr>
    </thead>
    <tbody id="shoppingListBody" style="height:200px;">
    </tbody>
  </table>
</div>

最初の 3 つの列のみが表示され、colMeterType、colModuleType、および colOrderOrQuote は css スタイルで非表示に設定されます。ここでは、ユーザーが見る必要のない情報を保存します。ユーザーが [バスケットに追加] ボタンを押すと、最初にユーザーが選択した変数を抽出する関数を呼び出し、それを買い物リストに追加します。

  $('#orderlist').append('<tr>'+
    '<td align="center" class="rm"><input type="checkbox"/></td>'+
    '<td><input class="numberOfItems" value="1" width="75px" size="3" pattern="[0-9]+" onkeyup="verifyQuantity()" type="text"/></td>'+
    '<td>'+bodyContent +"</td>"+
    '<td class="colMeterType">'+txtMeterType +"</td>"+
    '<td class="colModuleType">'+txtModuleType+ "</td>"+
    '<td class="colOrderOrQuote">'+ txtOrderOrQuote + "</td></tr>");

説明文は変数に格納されますbodyContent。

CSS にはあまり含まれていませんが、次のとおりです。

<style type="text/css">
   .HMalternatives{margin-left:20px;}
   .COMalternatives{margin-left:20px;}
   .colMeterType{display:none;}
   .colModuleType{display:none;}
   .colBestEllerForesp{display:none;}
   .warning{background-color:red;}
   .clear{ cleear:both; line-height: 0; overflow:hidden;}
   hr { border:0; border-top: 2px solid #7AB800 !important; height:0; width:100%; }
</style>

これに対する解決策として、スタック オーバーフローと他の場所の両方を検索しました。私は正確な問題を抱えている人を見つけることができませんでしたが、スタイリングの設定など、さまざまなことを試しましたがtr { padding-bottom:0px}、見つけたもののどれも私の問題を解決しません。

4

1 に答える 1

-1

正確な HTML/CSS を自分でテストしないと、なんとも言えません。

ただし、表のセル内のすべての要素 (入力要素など) のパディングとマージンの設定を確認することをお勧めします。また、セル内のテキストの行の高さは行の高さに影響し、高さ属性の上にパディングがあります。最終的な HTML と CSS のサンプルがあれば、簡単にテストできます。

于 2012-10-04T12:15:20.023 に答える