IEのdivのjQueryリロードの後に余分なスペースが追加されました

何かが選択されたときにjQueryを使用してリストを更新するWebページを作成しています。リストの下にボタンがあります。このアップデートはFirefoxとChromeではうまくいきますが、IEでは、更新するたびにリストとボタンの間に少しのスペースが追加されます。以下は、同じことを行う抜粋された例です：IEのdivのjQueryリロードの後に余分なスペースが追加されました

<html> 
    <head> 
     <style type="text/css"> 
      #list { 
       padding: 10; 
      } 
     </style> 

     <script type="text/javascript" src="jquery.js"></script> 
    </head> 

    <body> 
     <div id="test"> 
      <ul> 
       <!-- List --> 
       <li> 
        <div id="list"> 
         <ul> 
          <li>before 1</li> 
          <li>before 2</li> 
         </ul> 
        </div> 
       </li> 

       <!-- Button --> 
       <li> 
        <div> 
         <button id="button" onClick="reload();">button</button> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </body> 

    <script type="text/javascript"> 
    function reload() { 
     var html = 
      "<ul>" + 
       "<li>after 1</li>" + 
       "<li>after 2</li>" + 
      "</ul>"; 

     $("div#list").html(html); 
    } 
    </script> 
</html>

ボタンをクリックします。 FirefoxとChromeでは、それはそのままです。 IE（9）では、ビット（10または20ピクセルのビットを意味するビット。人間の目にはっきりと目に付きます。）をクリックするたびに移動します。誰が私にこれを引き起こしているか教えてもらえますか？おかげさまで

出典

2011-06-23 BCarpe

にとっては、IE9（私はそれを証明するために少しバリデータを追加、私は46の前と後の両方を取得）で正常に見える：http://jsfiddle.net/qEphF/1/問題は、他の場所でなければなりません。 – davin

IE9でもうまく動作します。 –

興味深い。 jsfiddleで実行しても問題は発生しません。 – BCarpe

更新は、ようです。

この場合、削除する要素に影響する可能性があるため、余白を削除してulに余白を追加することをお勧めします。

#list { 
    padding: 0; 
} 
#list ul { 
    margin:10; 
}

http://jsfiddle.net/qEphF/6/

jQueryのドキュメント

によると、この方法は、ブラウザの innerHTMLプロパティを使用しています。一部のブラウザでは、は、正確にのHTMLソースを複製するDOMを生成しない場合があります。

多分あなたは別のアプローチを試みるべきです。例えば、私にとって

$("div#list").empty().append($(html));

出典

2011-06-23 22:07:57

'$（html）'は、問題のような複雑なhtml文字列を使って（innerHTMLを介して）ちょうど同じ方法で動作するので、どれくらい役立つか分かりません。 – davin

#listのパディングを#list ulに移動すると問題は解決されました（ただし、パディングとして保持し、余白に切り替えないでください） – BCarpe

<style type="text/css"> 
     #list { 
      padding: 10; 
     } 
    </style>

reload関数を呼び出すたびに、IEは問題の原因となる10個のパディングを追加します。問題は、あなたのコードではなく、計算IEパディングに関連しているように同じことが（）を直接使用してJS .innerHtml起こるので、

出典

2011-06-23 22:05:35 riku

ええ、元の '＃list'の中に'＃list'sを入れ子にしているようです。 –

実際には、ボタンを10,50,100などのように指定しても、同じ量が動きます。 0になるようにパディングを指定するとうまくいきます。 – BCarpe

IEのdivのjQueryリロードの後に​​余分なスペースが追加されました

答えて

関連する問題

IEのdivのjQueryリロードの後に余分なスペースが追加されました