cssでフォントやボックスの大きさなどpxで指定するとブラウザごとに崩れてしまいます。
これはしょうがないと思うしかないのですか?
せめて同じWebキッドのSafariとChromeだけでも完璧に表示したい。
vhやvwでやっても結局のところpxのように万能ではないし、
プラグインかなんかで簡単にできるようなのを探しても見つからず、
ブラウザによってcssを変えるみたいなことなんですかね?
とりあえず最後の砦テラテイルって感じです。おねがいします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答6件
0
投稿2016/09/15 09:12
総合スコア145183
0
ベストアンサー
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
総合スコア3763
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
- reset.cssかnormalize.cssを使用する(ブラウザデフォルトCSS設定の上書き)
- box-sizingを指定する(幅・高さの計算処理の統一)
ひとまずこんなところでしょうか。文字サイズはブラウザによって変わりますが、
横幅900pxのコンテンツ内に横幅300pxのボックスを3つ敷き詰めて表示する場合(余白なし)、適切に設定をすればどのブラウザでも同じように横並びで表示できるはずです。
投稿2016/09/15 17:23
総合スコア2092
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
「各ブラウザの挙動が~」とのことなので、もしreset.css
などを読み込んでいなければ、最初に読み込めば改善されるかも知れません。
投稿2016/09/15 08:50
総合スコア2722
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。