CSS幅の小数点以下の桁数は尊重されますか？

225

CSSのデザインをしている間、私がしばらく疑問に思っていた何か。

CSS幅の小数点以下の桁数は尊重されますか？それとも丸みがありますか？

.percentage {
  width: 49.5%;
}

または

.pixel {
  width: 122.5px;
}

html css

— アラステア・ピッツ
ソース

186

幅のパーセンテージであれば、はい、尊重されます。マーティンが指摘したように、端数のピクセルに到達すると状況は崩れますが、パーセンテージ値が整数のピクセル値（例では200pxの50.5％）を生成する場合、賢明で期待される動作が得られます。

編集：私はしました端数ピクセルに何が起こるかを示すために例を更新しました（Chromeで値が切り捨てられているので、50、50.5および50.6は、すべて同じ幅を示しています）。

— スキルドリック
ソース

7

パーセント値自体は丸められないのは正しいですが、小数点以下の桁数のピクセル幅とパーセント計算の最終結果は常にピクセル全体に丸められます。）

— MartinodF

2

@MartinodF説明をありがとう。はい、ピクセルは丸められますが、実際に最も近い、床または天井に丸められるかどうかは定義されていません（これは、「物事が壊れる」という意味です）。

— Skilldrick、2010年

1

@Skilldrick好奇心のために、一部のブラウザーでデモの小数ピクセルを試してみました。IE9p7とFF4b7の両方が最も近いピクセルに丸められ、Opera 11b、Chrome 9.0.587.0、およびSafari 5.0.3は値を切り捨てました。@andras明確にするために：内部値が丸められると言っているのではなく、最終的なレンダリング値だけが丸められています。ズームしたり、一部の要素がプロパティなどを継承したりすると、その小数点以下の桁数がカウントされます。

— MartinodF 2010年

10

最新の更新：私のChromeバージョン24は実際には小数ピクセルを切り上げます。jsFiddleを表示すると、50.5と50.6はどちらも51pxに切り上げられ、50px divよりも1ピクセル広くなります。

— マイケルバトラー

5

注意すべき最も重要なことは、端数のピクセル寸法を持つ要素が互いにどのように積み重なるかです。それらは視覚的に切り上げますが、他の分数寸法の要素の隣に配置しても余分なスペースを取りません： cssdesk.com/8R2rB

— Sandy Gifford

53

ページが描画されるときに数値が丸められた場合でも、完全な値がメモリに保持され、後続の子計算に使用されます。たとえば、100.4999pxのボックスが100pxにペイントされる場合、幅が50％の子は、.5 * 100ではなく.5 * 100.4999として計算されます。そして、より深いレベルへと続きます。

私は、親の幅がems、子がパーセントである、深くネストされたグリッドレイアウトシステムを作成しました。上流に最大4つの小数点を含めると、顕著な影響がありました。

エッジケース、確かに、覚えておくべきこと。

— Natekoechley
ソース

2

受け入れられた回答はこの回答よりも完全ですが、この回答の逸話は、技術的な影響がどのように感じられるかについて、私により良い感覚を与えてくれます。投稿いただきありがとうございます。

— トム

23

（@SkillDrickが非常によく示しているように）小数ピクセルは個々の要素で切り上げられているように見える場合がありますが、実際のボックスモデルでは小数ピクセルが実際に尊重されていることを知ることが重要です。

これは、要素が互いに隣り合って（または上に）スタックされている場合に最もよくわかります。つまり、0.5ピクセルのdivを400個並べて配置すると、幅は1つの200ピクセルのdivと同じになります。それらすべてが実際に1ピクセルに切り上げられた場合（個々の要素を見るとわかるように）、200ピクセルのdivの長さは半分になると予想されます。

これは、この実行可能なコードスニペットで確認できます。

body {
  color:            white;
  font-family:      sans-serif;
  font-weight:      bold;
  background-color: #334;
}

.div_house div {
  height:           10px;
  background-color: orange;
  display:          inline-block;
}

div#small_divs div {
  width:            0.5px;
}

div#large_div div {
  width:            200px;
}

<div class="div_house" id="small_divs">
  <p>0.5px div x 400</p>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
  <p>200px div x 1</p>
  <div></div>
</div>

スニペットを展開

— サンディギフォード
ソース

11

レンダリングに関して：この例では、ピクセルごとに2つのdivが競合しています。これらの場合、ブラウザはそれらの1つを選択してピクセル全体をレンダリングします—ぼやけやその他の奇妙なアーティファクトを回避します。:nth-child(even)またはを使用してピクセルの半分を青に設定すると:nth-child(odd)、全体がオレンジであるか、全体が青色であることがわかります。青とオレンジの混合ではありません（漠然とした紫色の色相になります）。

— Daan Wilmer、2015年

16

幅は整数のピクセルに丸められます。

すべてのブラウザが同じように丸めるかどうかはわかりません。サブピクセルのパーセンテージを丸めるとき、それらはすべて異なる戦略を持っているようです。さまざまなブラウザーでのサブピクセル丸めの詳細に興味がある場合は、ElastiCSSに関する優れた記事をご覧ください。

編集：好奇心のために、一部のブラウザーで@Skilldrickのデモをテストしました。（パーセンテージではなく、小数のピクセル値を使用すると、リンクした記事で提案されているように動作します）IE9p7とFF4b7は最も近いピクセルに丸めるようですが、Opera 11b、Chrome 9.0.587.0、Safari 5.0.3は小数点以下を切り捨てます。結局何か共通点があるとは思いませんでした...

— MartinodF
ソース

7

それらは値を最も近い整数に切り上げるようです。Iamはchrome、safari、firefoxで不整合を感じています。

たとえば、33.3％が420.945pxに変換される場合

chromeとfirexfoxでは421pxと表示されます。一方、サファリは420pxと表示します。

これはクロムとファイアフォックスが床と天井のロジックに従っているようですが、サファリはそうではありません。このページは同じ問題について議論しているようです

http://ejohn.org/blog/sub-pixel-problems-in-css/

— あがせ
ソース

6

要素は整数のピクセルにペイントする必要があり、他の回答がカバーするように、パーセンテージは確かに尊重されます。

重要な注意点は、あるピクセル、この場合の手段でCSSピクセル 50.7499パーセントの子供と200pxのコンテナは101pxに丸められますので、ではなく、画面のピクセルCSSピクセルそして網膜画面上202pxにレンダリングされます、そしてない 400 *。 507499〜= 203px。

この計算では画面密度は無視され、要素を特定の網膜サブピクセルサイズにペイント*する方法はありません。Sandy Giffordが示したように、実際の要素のサイズが1 cssピクセル未満の場合でも、要素の背景または境界線を1 cssピクセルサイズ未満でレンダリングすることはできません。

[*] 0.5オフセットのボックスシャドウなどのテクニックを使用できますが、実際のボックスモデルプロパティは完全なCSSピクセルにペイントされます。

— オレックス・ポノマレンコ
ソース

優れた観察

— 8月