ブラウザによって見え方が異なる。

Question

ブラウザによって見え方が異なる。お世話になっております。ホームページを作る際に、ページ内に、表（）やフォームを使っています。特に、ページのレイアウトには、よくテーブルを使用しています。しかし、ブラウザ（safari（mac）、ie（windows）、firefox、operaなど）によって、見え方がことなります。たとえば、・ieでは、表の

内に文字がおさまっているが、　safariでは、おさまらず改行される。・form内のボタン（type=button）やテキストボックス（type=text）が、　ブラウザによって、大きさ（幅）が異なるため、レイアウトがずれる。などです。周囲に聞ける詳しい人もおらず、いろいろ調べたのですが、よく分かりませんでした。スタイルシートというのを使うのでしょうか。というより、それが常識なのでしょうか。私はスタイルシートについては、超初心者なのですが・・・。あるいは、別の問題なのでしょうか。大変恐縮なのですが、これらの解決に、参考となるサイトなどあれば、ご紹介いただきたいのですが。どうぞよろしくお願いします。

metametamu · Accepted Answer

＞form内のボタン（type=button）やテキストボックス（type=text）が、ブラウザによって、大きさ（幅）が異なるため、レイアウトがずれる。

フォームの問題に関しては現在あまり解決策がありません。
最新のブラウザのみの対策で良ければこんな感じにするとwidthとheightを指定して統一が取れます。

input[type="text"],
input[type="submit"],
input[type="button"]{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

比較的簡単ですがIE6～7の標準準拠時に関しては大きさが2pxほどずれます。

よくオススメするサイトなのですが、このサイトはIE6対策がわかりやすく説明してあるので一度目を通されるとよいと思います。
http://adp.daa.jp/web.html

ORUKA1951 · Answer

デザイン(プレゼンテーション)のために画像やflashを使うのは基本から外れています。
　HTMLは、原則は、デザインが作者の期待と異なっても情報がきちんと伝わること。
　HTMLはデザインのためではなく、文書構造を記述するものです。そのうえで、さまざまなユーザーエージェント(スクリーンブラウザだけでなく、読み上げブラウザ、携帯端末、そして検索エンジンなど）が文章の構造を伝えるためのフォーマットです。
　2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 )
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
　をしっかり理解しておいてください。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・・・【中略】・・・
* テキストを画像に置き換えて表現する。
・・・【中略】・・・
* ページレイアウトの目的で表を用いる。
・・・【中略】・・・
 こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

ブラウザは、HTMLで書かれた文書を、それぞれのブラウザがデフォルトで持っているスタイルシートに従って、ユーザーが見やすいように表示しますが、それは当然それぞれのブラウザによって、時には大きくデザインが変わる場合もあります。
　実は、それはそれでよいのです。sfariを使用している人に、他のブラウザと同じように表示させようとすると、safariユーザーにとっては不愉快・・見慣れないデザインとなってしまうのです。

・ieでは、表の<td>内に文字がおさまっているが、
　safariでは、おさまらず改行される。
・form内のボタン（type=button）やテキストボックス（type=text）が、
　ブラウザによって、大きさ（幅）が異なるため、レイアウトがずれる。

については、sfariでも収まるようにセルの幅を決める。あるいはスタイルシートで文字幅(em)でセル幅を決める。
　　が正しい解決方法です。テーブルを使用すべきかも含めて、検討してみてください。

think49 · Answer

デフォルトスタイルシートの違いじゃないでしょうか。

ul要素とol要素のブラウザごとの違い - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips/webtips0034.html

制作者スタイルシートでデフォルトスタイルシートを上書きすれば、ブラウザ間の差異はほぼなくなります。

値わりあて，カスケード処理，継承 - CSS2リファレンス
http://hp.vector.co.jp/authors/VA022006/css/cascade.html#cascade

実際にはブラウザのバグもあるので完全に同一にはなりませんが、質問者さんの場合はデフォルトスタイルシートの影響が大きい気がします。

neko-ten · Answer

レンダリングエンジンで表示が違うのは、ぶっちゃけ常識です。これはCSSであってもエンジンによって解釈違いますし、JavaScriptもそうです。特にIEなんかどう考えても違うだろ・・・っていう解釈しますし。根本的な問題としては・・・・ページのレイアウトには、よくテーブルを使用しています。テーブルは表を表示するためのタグです。テーブルを使ってデザインすることは推奨されません。グリッドレイアウトならBOX使いましょう。・スタイルシートというのを使うのでしょうか。現在CSSを使わない選択肢は存在しません。 HTMLは構造を記述しますので、デザインはすべてCSSの役割です。といったタグすら推奨されません。あたりも。ハックすることである程度表示の差は緩和できます。ただし、OSで使用するフォントは違いますし、デフォルトのフォントサイズも違います。エレメントの画像も違うため、どうしても差異を完全に吸収することはできません。そのため、作成の時点で「ある程度ずれても支障のないデザイン」を想定します。最終的には、ブラウザごとに完全に別ページとして作成、UA等で判別、振り分けする・・・といった手法や・・・ #1さんのとおりFlash使うなりするしかないでしょう。（なお、HTML5想定されてるなら、それこそCSSやハックも必須ですしCSS3も拡張実装されます。）＞ボタンやテキストボックスを使わずに、データの参照、追加、更新の処理は、どのように行うのでしょうか。 JavaScript使えばいい。イベント取得して動作させれば、極論bodyの中身が空っぽでもOK 文字表示を一切させないという制限があるなら、Ajaxでサーバに送ってGDあたりで画像生成、応答で帰ってきた画像を張り付けるとか・・・無駄足でしかないのでお勧めしません・・・て当たり前ですね。まずはCSS習得しましょう。ここでもやっぱりブラウザ差異が出てきますが、デザインと構造を分離できる分対処は楽になります。ハックは、CSS HTML ハック　とかで検索するとたくさん出てきます。よく見るサイト http://coliss.com/ ハックを直接扱ってはいませんが、情報収集に利用 http://d-lover.com/css/hack.shtml ちょっとわかりやすい記事

chie65535 · Answer

「ブラウザが違えば見た目が違う」のが常識。

見た目を統一したい場合は「すべてを画像にしてボタンやテキストボックスや文字を排除する」か「全てflashにする」しかありません（flashにした場合、flashが使えない一部のiPhoneやiPadでは閲覧できないページになります）

ブラウザによって見え方が異なる。

＞form内のボタン（type=button）やテキストボックス（type=text）が、ブラウザによって、大きさ（幅）が異なるため、レイアウトがずれる。

デザイン(プレゼンテーション)のために画像やflashを使うのは基本から外れています。

デフォルトスタイルシートの違いじゃないでしょうか。

レンダリングエンジンで表示が違うのは、ぶっちゃけ常識です。

「ブラウザが違えば見た目が違う」のが常識。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　デザイン(プレゼンテーション)のために画像やflashを使うのは基本から外れています。