jQuery.width（）とheight（）はIEとChromeで異なる値を返します

Question

ブートストラップモーダルでnvd3チャートを表示しています。しかし

#trendModal .modal-dialog { 
    width: 800px; 
} 

#trendModal .modal-body { 
    height: 400px; 
} 

<div class="modal fade" id="trendModal" tabindex="-1" role="dialog" aria-labelledby="trendModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="trendModalLabel"></h4> 
      </div> 
      <div class="modal-body" id="trend-container"> 
       <svg></svg> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

、私は幅とモーダルの高さを取得しようとしたとき、私はIEとChrome上の異なる答えを得る：私はCSSでモーダル-体の幅と高さを指定

width = $("#trendModal .modal-dialog").width(), //IE: 800, Chrome:780 
height = $("#trendModal .modal-body").height(), //IE: 400, Chrome:360 

をに見えますChromeのようにいくつかのパディング/マージンを自動的に差し引いてはいけません。 これはどのようになるのでしょうか？行動を統一したいのであれば、どうしたらよいですか？ありがとう。

Answer 1

これは動作するはずです：

var width = $("#trendModal .modal-dialog").outerWidth() 
    height = $("#trendModal .modal-body").outerHeight(); 

これらはあなたに彼らが含まれている可能性のマージンとパディングを含む要素の合計の高さと幅を与えます。

Answer 2

ドキュメントの準備完了トリガーで高さ/幅が計算されるChromeで問題が発生する可能性があります。これはコンテンツの幅/高さの変化の仕方を考慮していません。 $（document）.load（...）を試しましたか？