2

Chromeブラウザの要素のサイズに問題があることに気づきました。
私は簡単なコードを書きました：

<html>
<body>
<table border="1px">
<tbody>
<tr>
    <td>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
    </td>
</tr>
</tbody>
</table>
</body>
</html>

縦に4スパン繰り返し、それぞれ5cmになると思います。IE、Firefoxなどで動作します。IE-
正常に動作します

しかし、Chromeには次の問題があります
。Chrome-機能しない

IEでは、スパンの幅はそれぞれ189ピクセル、tdの幅は772ピクセルです。
Chromeでは、スパンの幅はそれぞれ189ピクセル、tdの幅は771ピクセルです。

これはChromeの問題ですか？なぜ私のtd要素がそのコンテンツに適合しないのですか？これらのスパン要素を維持し（つまり、divに置き換えることはできません）、幅をcmで設定することが重要です。テーブルの境界線を削除しても、この問題は引き続き発生します。

4

1 に答える 1

2

cm固定数のピクセルが必要な場合、CSSユニットは信頼できません。また、実際に画面上で5cmを測定する可能性は低いです。cmユニットは主に印刷スタイルを対象としています。はい、画面上で使用できますが、正確さは期待できません。

5cmボックスが189ピクセルとしてレンダリングされるという事実は、cmaが整数のピクセルではないことを示しています。これだけで、ユニットを使用して正確なピクセルレベルのクロスブラウザレンダリングが得られる可能性は低いと言えますcm。

それは起こらないだろう。ピクセル単位の精度が必要な場合は、px単位を使用してください。

質問の中で、単位を変更することはできないと言います。それはあなたにこれらの問題を与え続けるだけなので、可能であればあなたは本当にそれを再考するべきです。

本当に変更できない場合は、単位を変更せずに問題を解決するために私が考えることができる1つの方法は、<td>要素にwhite-space:nowrapスタイルを与えることです。これにより、ブラウザがスパンをそこにあるべきかどうかに関係なく、すべてのスパンを同じ行に強制する必要があります。それはあなたのためにトリックをするはずです。cmただし、根本的な問題は解決されません。画面でユニットを使い続けると、他の方法で再発する可能性があります。

そもそもグリッチの正確な原因については、Chromeが浮動小数点のピクセル値をわずかに異なる方法で処理していること、およびスパンのピクセル幅を追加して幅を計算するときに丸め誤差があることを推測します。を作成し<td>ます。この場合、Chromeのバグのように聞こえ、報告することはできますが、上記のすべてを考慮すると、優先度の高い問題になっていることはわかりません。

于 2012-11-13T13:07:54.720 に答える