CSSピクセルを分数にすることはできますか?


81

CSSをpx分数にすることはできますか?規格で許可されていますか?もしそうなら、主要なブラウザはそれをサポートしていますか?

皆さん、ドキュメントで答えをバックアップしましょう。


@MetalFrogこの質問は職場での議論から生じています:
Kees C. Bakker

3
皮肉なことに、私は最近、jQuery UIの並べ替え可能なグリッドを適切にレイアウトするために、小数ピクセルを使用する必要がありました。プレースホルダーの余白が周囲のアイテムの余白と同じか1ピクセル小さい場合、ドラッグするとグリッドが場所全体に移動します。唯一の修正(およびクロスブラウザーの修正!)は、プレースホルダーのマージンを0.5px減らすことでした。その後、すべてが正常に機能しました。それがスペックであるかどうかにかかわらず、ほとんどが衒学的であるかどうかにかかわらず、あなたは一日の終わりにあなたがしなければならないことをしなければなりません。
クリスプラット

1px未満の線をブラウザがどのようにレンダリングするかについての規則はありますか?テーブルの境界線の幅がピクセルの何分の1かに対応するページ(Word文書をHTMLに変換)がたくさんあります。これらはIEとFirefoxでは1pxとして表示されますが、クロムの内側には境界線がまったく表示されません
Andy

1
分数または小数に関する最初の質問でしたか?分数は1/3になりますが、小数は.33(繰り返し)になります。数学的には違いがあり、数学の専門性に関心があるとすれば、それはコンピューターです。
マイク

1
重複していないが関連している-レンダリングによって尊重されている小数ピクセルの議論: stackoverflow.com/questions/4308989/…–
Sandy Gifford

回答:


69

はい、分数ピクセルを指定できます。これは最初のバージョンからCSSの一部であるため、CSSをサポートするすべてのブラウザーで十分にサポートされているはずです。

参照:CSS 2.1:4.3.2長さ

「長さの値(この仕様では<length>で示される)の形式は、<number>(小数点付きまたはなし)の直後に単位識別子(px、emなど)が続きます。」

要素が画面に表示されている場合、ほとんどのブラウザは、100%のズームレベルを使用すると、自然に位置を最も近いピクセルに丸めます。より高いズームレベルでは、小数のピクセル値が認識されることに気付くでしょう。


1
@ KeesC.Bakker:追加しました。:)
グッファ2012年

6
問題は、ブラウザが異なればラウンドも異なることです:stackoverflow.com/a/5587820/405015
30dot 2012年

4
このテーマに関する興味深いブログを見つけました:ejohn.org/blog/sub-pixel-problems-in-css
cboler 2012

12
明確にするために、分数は1/3になりますが、小数は.33(繰り返し)になります。私はそれが部分的にセマンティクスであることを認めます(数学専攻ではなく、そうではありません)が、正解はCSSが分数または分数ピクセルをサポートしていないということです。ただし、10進ピクセル値はサポートしています。
マイク

4
@Mike:小数という用語は、小数部分を持つ数値または基数10で表される数値を指定できる小数という用語と同じように、さまざまな方法で使用できます。
guffa 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.