7

さまざまなブラウザでoffsetWidthを使用する際に問題が発生しました。結果のこの違いは、いくつかの奇妙なレイアウトを引き起こしています。私が見ているものを表示する非常に小さな例を作成しました。

jsbin

HTML

<table id="tbl">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
<button onclick="calc()">Calculate Offset Width</button>

<div>Cell 1 offsetWidth: <span id="c1offWidth"></span></div>

js

function calc(){
  document.getElementById('c1offWidth').innerHTML =
      document.getElementById('tbl').children[0].children[0].offsetWidth;
}

CSS

ErikMeyerのCSSのリセット

これをchrome、safari、operaで実行すると、セル1のオフセット幅に対して返される値は72です。これをfirefoxとIE9-10で実行すると、返される値は77です。

これが、パディングや境界線を含む要素の幅を計算するための最良の方法であるという印象を受けました。

常に同じ結果を返すクロスブラウザソリューションはありますか？jQueryを使用してみましたが、結果はさらに混乱していました。

編集 誰もがouterWidthを推奨しているので、私もそのためのjsbinを作成しました。結果はブラウザによって異なります。Chromeは36を返します。IE9-10とFirefoxは39を返します。

jsbinが更新されました

4

4 に答える 4

4

投稿にjQueryのタグを付けたので、jQueryソリューションは許容できると思います。何が問題なのouterWidth()ですか？

例えば：

function calc()
{
    var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
    $('#c1offWidth').html(the_width);   
}

jQueryを使用すると、テーブルに多くの利点がもたらされます（上記で必要なコードの量が減ったことからわかるように）。また、非侵入型のイベントハンドラーの使用も検討する必要があります。たとえば、onclickから属性を削除し、次のようにしますbutton。

$(function() {  
    $('button').click(function() {  
        var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
        $('#c1offWidth').html(the_width);  
    });
});

jsFiddleデモをご覧ください。

于 2013-02-20T22:19:03.093 に答える
4

あなたの例の実際の問題は、異なるブラウザがレンダリングに異なるデフォルトフォントを使用することでした。また、セルのボックスサイズはコンテンツによって定義されます。要素に明確な幅を設定すると（コメントの1つに正しく記載されているように）、明確で等しい結果が得られます。

ps：コメントを投稿できません...

于 2013-08-01T09:27:01.133 に答える
3

offsetWidth信頼できるクロスブラウザではありません。代わりにjQueryを使用することをお勧めしouterWidth()ます。

$("#your-element").outerWidth();

DEMOを参照してください。

于 2013-02-20T22:16:22.913 に答える
0

.outerWidth()境界線やマージンなどを含むクロスブラウザで計算された幅を取得する必要がある場合は、jQueryを使用できます。

于 2013-02-20T22:18:37.940 に答える