レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い

デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子

[cheesesouffle]

Chrome 21 から Firefox, IE9, IE8 と同じになるみたいですよ。

[Horiuchi_H]

やっぱり小数点以下の誤差問題は、出てくるんだなぁ。

[ryuzee]

サブピクセルか...

[Falky]

Chromeが解決して大団円、かと思いきや、Mobile Safariが切り捨て組だった。これはキツい。iOS 7.1で確認。//2014.09.18追記: iOS 8.0にてMobile Safariが自動調整になったことを確認

[oki448jp]

レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い

[raimon49]

業務ではなく個人の道楽であればIE7以下は見捨てるに限る。

[akymrk]

パーセントの幅指定。小数点以下を含み場合の書くブラウザの挙動の違い。小数点以下切り捨てor not。親要素に合わせて切り捨て/上げを自動選択.tctt

[SpeedcoreTokyo]

レスポンシブ奥が深い…勉強になります

[Nemisama]

ナルホド

[noguchima1979]

そのうち必要になりそう。。

[hama_shun]

小数点以下のピクセル値の挙動

[tarchan]

WebKitとFirefoxの挙動は統一して欲しいなあ

[hukuchosan]

WebkitとOpera 小数点以下は切り捨て 100px x 33.5% = 33.5px → 33px 100px x 33.33% = 33.33px → 33px Firefox、IE9、IE8 自動でピクセル値を計算、調整する 100px x 33.5% = 33.5px → 33pxまたは34px 100px x 33.33% = 33.33px → 33pxまたは34px IE7、IE6 0.5以上を繰

[susi-paku]

制作案件来ているのでチェック。('A')っ｜RT @stocker_jp: “Rriver » レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い”

[nao14115]

レスポンシブなデザインにするなら知っておきたい。小数点以下のピクセル値のブラウザ挙動