なぜ私のHTMLボタンがI.Eで動いていますか？ ChromeやFFで移動しません

私たちはデータベースにデータを送信するためにAJAXを使用しています。私は、リクエスト中に回転するスピナー（アニメーション化された.gif）と、リクエストが完了したときにユーザーに表示される合格/不合格のテキストを含む、ユーザーに対するいくつかのフィードバックを追加しました。なぜ私のHTMLボタンがI.Eで動いていますか？ ChromeやFFで移動しません

HTML：

<center> 
    <table style="width:350px;"> 
     <tr> 
      <td style="width:100px; min-width:100px;" align="right"> 
       <span id="spinner-and-text-displayed-here"></span> 
      </td> 
      <td style="width:150px"> 
       <input type="button" value="Submit" onclick="submit();"/> 
       <input type="button" value="Cancel" onclick="cancel();"/> 
      </td> 
      <td style="width:100px"></td> 
     </tr> 
    </table> 
</center>

ユーザーはAjaxのコールバックが返されるまでスピナーが回転送信ボタンをクリックします。この時点で、ボタンはシフトしません。コールバックを受け取ると、「成功！」というテキストが表示されます。（spanのjQueryを使用して表示されます。$(el).html("Successful!");）、ボタンが右に移動します。そのメッセージは（jqueryも使用して）フェードアウトし、ボタンが完全に消えたら、ボタンは元の位置に戻ります。

「成功！スパンの内側にボタンが移動しているので、テキストと何か関係があることを知っています（スピナーが表示されても[imgタグを使用]）。

最初にtdの幅をどれくらい広く設定しても問題ありません。

IEでこれらのボタンをシフトしないようにする方法はありますか？

出典

2010-12-20 Darcy

-1センタタグを使用する場合-1、意味的に不正確な方法でテーブルを使用する場合は-1、インラインスタイルの場合は-1 2010年へようこそ。コーディング基準を更新してください。 – zzzzBov

ouch zzzzBov。公平になるために、私はこのコードを継承しました。あなたはすべてのページを更新してください、数百だけあります。 – Darcy

FWIW - 互換モード以外のIE8では問題ありません。また、私はこの質問を非常にうまく言いました:)。 – Hemlock

border-collapse:collapse;をtableのstyleの定義に追加し、中間のセルのサイズを小さくしてみてください。

<center> 
    <table style="width:350px;border-collapse:collapse;"> 
     <tr> 
      <td style="width:100px; min-width:100px;" align="right"> 
       <span id="spinner-and-text-displayed-here"></span> 
      </td> 
      <td style="width:145px"> 
       <input type="button" value="Submit" onclick="submit();"/> 
       <input type="button" value="Cancel" onclick="cancel();"/> 
      </td> 
      <td style="width:100px"></td> 
     </tr> 
    </table> 
</center>

出典

2010-12-20 21:04:37 Jonathan

これは実際には（私の驚きに）うまくいきました。「国境崩壊：崩壊」のスタイルと、中央のセルの幅を狭くして作業するようになりました（あなたの言ったように）。ありがとうございましたJonathan – Darcy

あなたが投稿したHTMLとして@Darcyがかなり古くなっていると思います。あなたが何か遺産に取り組んでいると仮定して、上記の提案をそのブロックだけを対象にしました。 – Jonathan

ファイルにDOCTYPEを追加します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 

<body> 
    <table style="width:350px;"> 
     <tr> 
      <td style="width:100px; min-width:100px;" align="right"> 
       <span id="el"></span> 
      </td> 
      <td style="width:150px"> 
      <input type="button" value="Submit" onclick="$('#el').html('Success');"/> 
      <input type="button" value="Cancel" onclick="cancel();"/> 
      </td> 
      <td style="width:100px"></td> 
     </tr> 
    </table> 
</body> 
</html>

私は同様の問題がありました。これは、IEが他のブラウザとは異なる方法で処理していたためです。

出典

2010-12-20 21:07:49 Ryan

なぜ私のHTMLボタンがI.Eで動いていますか？ ChromeやFFで移動しません

答えて

関連する問題