4

なぜこれが起こったのか誰かが知っているかどうかを確認するために、この質問をするだろうと思いました.Chromeのバグであると確信しています.

私が使用している Chrome のバージョンは次のとおりです。バージョン 30.0.1599.69 m (この記事の時点での最新バージョン)

これは、次のことを示すフィドルです。

http://jsfiddle.net/Dz4Q5/

HTML

<table id="myTable">
<tbody>
    <tr>
        <td id="testWidth">
            This should have some width
        </td>
    </tr>
</tbody>
</table>

CSS

#myTable {
  background-color:#4679bd
}
#testWidth {
 padding: 0;
 width: 0;
}

Javascript

var width = document.getElementById('testWidth').offsetWidth;
document.getElementById('width').innerHTML = width + 'px';

ページには、テキストを含む青いボックスが表示されます。この青いボックスは明らかにある程度の幅があります - スペースを取るからです。ただし、CSS では幅 0 が指定されています。これは実際には提案にすぎませんが、表のセルは実際には、それをプッシュした子からその幅を取得します。

どういうわけか、JavaScript は、テーブルセルの offsetWidth が 0 であると言っています。

他のすべてのブラウザーは、このテーブル セルの実際のオフセット幅をゼロ以外の値として提供します。Chrome v29 以下でテストする場合も含まれます。

Chrome v30 のみがこの問題を抱えているようです。

ここで何が起こっているか知っている人はいますか？それとも、Chrome 開発者がバグを修正するのを待つべきですか?

おそらく、これに頼るべきではないのに、offsetWidth に頼っているのでしょうか?

これは、明らかに W3C 仕様に違反しているように思えます。間違っているのでしょうか?

また、Chrome はテキストをまったくラップしていないように見えますが、CSS で幅を 0 に指定したため、他のすべてのブラウザーはテキストをラップします。可能な限り幅を最小化する必要があります。

注意してください - #testWidth セルの幅を変更すると、オフセットはその幅に変更されます - つまり、0 ではなく 10px と言うことができ、出力は 10 になります。 CSSでは、どちらが間違っていますか...そうですか??

4

2 に答える 2

0

css からを削除することでこのバグを防ぐことができwidth: 0;ます。これを max- または min-width に変更することもできます。

http://jsfiddle.net/Dz4Q5/4/

于 2013-10-09T02:31:55.137 に答える