CSS ブラウザによって変わる

cssでフォントやボックスの大きさなどpxで指定するとブラウザごとに崩れてしまいます。

これはしょうがないと思うしかないのですか？

せめて同じWebキッドのSafariとChromeだけでも完璧に表示したい。

vhやvwでやっても結局のところpxのように万能ではないし、

プラグインかなんかで簡単にできるようなのを探しても見つからず、

ブラウザによってcssを変えるみたいなことなんですかね？

とりあえず最後の砦テラテイルって感じです。おねがいします。

行動規範の内容に同意します

回答6件

文字の表示に関しては、ユーザーの環境に入っているフォントも違えば、そのフォントを描画するレンダラーも、ブラウザによってまちまちです。

文字の表示をピクセル単位で合わせる、というような用途には、ブラウザという環境はまったく適当ではありません。

投稿2016/09/15 09:12

maisumakun

総合スコア145183

ベストアンサー

cssでフォントやボックスの大きさなどpxで指定するとブラウザごとに崩れてしまいます。

フォントサイズについて：
これについてはmaisumakunさんが指摘しているように、「全ての環境で完璧に同じにする」ことは、
Webブラウザ環境で閲覧している場合ほぼ不可能だと思ったほうが良いでしょう。
Webフォントを指定すればかなり近い表示までは持っていくことができますが、
アンチエイリアスの有無など環境に左右される部分は残ると思います。

ボックスの大きさについて：
ボックスの大きさについてはフォントサイズを基準とするem,rem以外で指定してあれば
基本的に「ほぼ」同じ状態で表示できるはずです。
明らかにパッと見て分かるくらいサイズに違いがある場合、後方互換モードになっている等、
Web標準仕様とは異なる状態でレンダリングされてしまっている可能性があります。
DOCTYPEをHTML5に揃え、IEの互換モード表示防止の指定を入れ、最初にリセットCSSで
ブラウザの初期スタイルシートをフラットにしてから作成すればこの辺はほぼ解消されます。

「ブラウザごとに崩れてしまいます。」とおっしゃっていますが、
具体的に何がどう崩れていると主張されているのかが不明です。
正しく仕様に基いて作っていれば、あからさまに「崩れている」と言うほどの違いは出ないはずです。
質問者さんは何かこだわりすぎているのではないでしょうか？

「完璧に同じにする」という状態が、例えばMacBookAir11インチと富士通の15インチノートPCと
27インチの大画面モニタにうつして隣に並べて定規で測った際の実寸を同じにするなんていう意味なのだとしたら、それはそもそも不可能なことですし全く意味がないことです。Webはそういうメディアではありませんので。
また異なるブラウザで画面キャプチャーを取って、それを重ねて完璧にピッタリ同じにする
というレベルであってもほぼ不可能に近いです。
特に今日のようにマルチデバイス対応で可変レイアウトが当たり前となった時代において、
ピクセルパーフェクトは意味をなさないですし、物理的にほぼ不可能です。
どうしてもピクセルパーフェクトにしたければ、全て画像にするかPDFでも貼っておくしかないでしょうね。

一昔前はWebでも紙メディアのようにピクセルパーフェクトを求める風潮が強かった時代もありますが、
現在は完全に時代が違います。「1pxのズレも許さない」的な価値観ではやってられないのです。
環境による多少の違いは許容しつつ、多様なデバイスでストレス無く閲覧できるように柔軟に構築するのが
今のスタイルです。

価値観の違いですね。。。

投稿2016/09/15 11:04