ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。

具体的には、フォントのサイズが
IE8<Safari<Firefox3
になっています。

価格.comなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。

スタイルシートに
body {
font:13px;
*font-size:small;
*font:x-small;
}
を書き加えてみましたがあまり変化はありませんでした。

どのようにすればいいのでしょうか?

A 回答 (9件)

だれも、正しいなんて、言っていませんよ。

回答した人全て、正しいとは。

ハックなんて、正しくない指定とか、正しいが、他と違う動きだ、とか、そのような物をあえて使うことがハック。

http://troi.kbc-ehime.ac.jp/kj/?p=1672
(あくまで記載されている文献なので、内容の正当性は確認していない)

わかりやすいのが、クロスぶらうざで、

if ( document.all ) {
dhtml ブラウザ
} else {
DOM対応ブラウザ
}

とJavaScriptのコード。これ本来、動作は決まっていなかったが、オブジェクトだとtrueを返すなんて言う隠れた仕様が表にでてきただけ。

http://freematerial.fc2web.com/ref_js/ref_js_w_d …
(あくまで記載されている文献なので、内容の正当性は確認していない)

昔あやまって1箇所いサイズにPXを指定していて、他と同じサイズなのに違うサイズになっていた事に気がついたが、しかし、特にエラーにはならずに無視されたか、デフォルトの設定が効いていると思った。が、ちょっと違うようだった。これに気がついたのがIE5.0のとき。(だいぶ他人より気づくのおそかったな)

IEのDOCTYPEの設定によりスタンダートか、そうでないかの指定でも違った。他のブラウザでも試したが、反応がまちまち。同じエンジンだと、ほぼいっしょのはずなんだが・・・

私は、このようなハックのやり方は嫌いだ。しかし便利につかえる所がある。プログラミング的には、ごてごてになるやりかたなので、業務用のソフトでも、緊急避難的に、プラットフォーム(OSなど)のバグを回避して、バグの仕様に付き合ってパッチを出す事が多い。

もちろん、メーカーに(マイクロソフトとかSunとかIBMとか)、パッチ要求しているが、時間的に無理があり、パッチが出るまで、その方式になっているが、結局次期バージョンとかで再度そこのコードを改変しなといけないので、2度、3度でまになっています。そのような経験しているので、ハックはやりたくない。でも、便利だ(セキュリティーパッチなんて嫌いだ)。

その微妙な動作なので、マトリックスを作って、じっくりテストしてください。と言っている。へたすると、時期MicrosoftUpdateで、動作が変わっているかもしれない。他のブラウザも同じ。時期バージョンで、「あ、そこはバグだったので修正しました」なんていわれるかもしれない。そのリスクは十分にある。ただ、ハックを推奨している向きもある。

私と同じように、そのコードを書いた人のミスなら、それは、それとして直す必要がある。

なお、CSSだと無効な物は、無視される事がおおいが、それが実は効いている事もあるので、じっくり吟味してほしい。例えば上位が、12pt で、カレントが 20pxと指定した場合とか。その逆も。そのような所にバグ(仕様)が多い。
    • good
    • 0

「font プロパティ」はあるけど今の例だと指定が間違ってるから結局アウトでは>#5.



参考URL:http://www.w3.org/TR/CSS1/#font
    • good
    • 0

No.1です。


繰り返しますが、pxは相対サイズです。
【引用】____________ここから
相対単位には以下のものがある:
 ・em: 関連要素の'font-size'の値を参照する
 ・ex: 関連フォントの'x-height'を参照する
 ・px: 閲覧しているデバイスの解像度を参照する
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より

【引用】____________ここから
相対単位に分類されているピクセルはディスプレイでの表示を前提に考えると絶対単位のように思えるかもしれませんが、 これはれっきとした相対単位です。 出力機器の画素の大きさに左右されるためです。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[長さ(length)の単位 - Web標準普及プロジェクト( http://www.mozilla.gr.jp/standards/webtips0027.h … )]より

 ただ、今回の問題は、font-sizeとなるべきところを、fontと書いてしまったためだと思います。わからないときは、まず仕様書を確認する癖をつけましょう。仕様書を読まずに書かれているサイトやマニュアルもありますので・・
    • good
    • 0

font-sizeのpx指定は、絶対値指定なので、画面解像度以外の部分でブラウザによって差がでることはないと思いますよ。


もちろんブラウザ間で表示されているフォントが異なれば、具合も変わるのでそこは差っ引いてみてください。
問題があるとしたら、CSSのカスケードの仕方です。つまりどこかで記述がおかしくなっていると思います。
ためしに、すべてのCSS(場合によってはJSも)を削除して、
*{
font-size:13px;
font-weight:normal;
}
としてみてください。

どうですか?
ブラウザによって差がありますか?
この状態で差がないことを確認出来れば、あとはCSSを追加しながら問題がでるところまでコツコツと追いかけるだけです。
    • good
    • 0

どのようなつもりで font プロパティ が無い、と言ったのわかりません。



http://msdn.microsoft.com/en-us/library/ms530756(v=VS.85).aspx
http://www.w3.org/TR/REC-CSS1/#font

と言うことで基本的なCSS バージョン1 から定義されていましたが?

ハックとの組み合わせなので、微妙な動作。ちゃんとテストしないと。
    • good
    • 0

えっっあまりに初歩的


★ちゃんと調べて質問なり、回答しなけりゃ。
 ネット上に参照すべき資料は必ずある。

 font: というプロパティはないですよ。HTMLと間違えてない??
font-size:14px;
でなけりゃ・・・elementのattributeと混同しないように
font-colorじゃなくて、color:とかも、よく間違う


【引用】____________ここから
・em: 関連要素の'font-size'の値を参照する
・ex: 関連フォントの'x-height'を参照する
・px: 閲覧しているデバイスの解像度を参照する
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
なお、pxは相対サイズなので絶対サイズで指定したけりゃ
【引用】____________ここから
絶対単位は、出力媒体の物理的性質が予め判っている場合に限り有用である。 絶対単位には以下のものがある:
・in: インチ -- 1inは2.54cmに等しい
・cm: センチメートル
・mm: ミリメートル
・pt: ポイント -- 1ptは1/72inに等しい
・pc: パイカ -- 1pcは12ptに等しい
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より

 たとえばpxは、WindowsとMacでは違うサイズになる。

★絶対サイズは薦めません。端末やユーザの環境は異なるので、あくまで利用者の標準サイズを基準に決めてあげよう。目の悪い人、解像度の低い端末・・・もあるのですよ。
 フォントサイズを指定しなくても表示が崩れないように、それがスタイルシートの目的かも。
    • good
    • 0

趣味でホームページを作成している30代男です。


まず、ページを訪問した人全てに同じ文字の大きさで
提供しようというのがそもそもの間違いです。
理由としましては、お使いのブラウザそれぞれでの文字の
表示形式を統一しての比較をされていますか?
ただ単にブラウザをインストールして詳細設定した後の比較
ですとまだ近い状態には近づくと思いますが、
恐らくブラウザによって「13px」の扱いが違うと思います。
試しに「13px」を「80%」としてみて下さい。
それでもかなり違いますかね?
この%表記はお使いのブラウザの文字表示のデフォルトが
仮にIE6でフォントサイズ中の時にmediumuの大きさが16px
相当とします。この時に75%で指定すると、その16pxの75%
つまり12px相当の大きさで表示されるというものです。
CSSでは、以前よりpx設定は非推奨されています。
理由は質問者様の抱えている問題の為です。
これはちなみに<p>要素にも反映されます。
という様に全く同じ表示にするという事がそもそも無理です。
おおむねこの位の表示をさせたいとお考えください。
まぁJavaScriptとかで条件を指定すれば全く一緒というのは
可能かもしれませんが、HTML+CSSではなかなか難しいと
思われます。
    • good
    • 0

まだまだ経験が浅いようだ。



body {
font:13px;
*font-size:small;
*font:x-small;
}


どこから持ってきたのだろう。

普通、そのままCSS適用する思うが。必要なのは全部のCSS、JSファイル、さあ全部適用して、これはと思う物をはずしてみよう。

それがデバックの仕方。

普通、はずす前に、その使い方が、CSSのどのバージョンで、どのような仕様になっているか調べると思うが、さらにブラウザによって、どのように適用されているのか調べると思うのだが、

どうだろう。

>どのブラウザでも同じサイズに見えます。


そうかな~

ひんとだけ

http://www.webbibo.com/blog/htmlcss/selector.html

このような人もいる。しかし、テキストを買えば、同じような事が載っているのだが・・・・
    • good
    • 0

13pxなら、YUIベースで同じに見えるけど、


フォントファミリーは? MS Pゴシックで比較してみれば?

body {
font:13px/1.231 "MS Pゴシック",sans-serif;
*font-size:small;
*font:x-small;
}


body{ font-size:small !important; font-size:x-small;}
とか、
body{ font-size:13px !important;}
とか、
body{ font-size:13px !important; font-size: 81.2%;}
*:first-child+html body{ font-size: small !important;}

色々やってみたら?
フォントファミリーや古いブラウザ、DTDによっても違うし・・・
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでfont-familyを指定してるのに、ブラウザによって見た目が違う問題。

タイトルの通りですが、

font-family:"ゴシック";

と、指定しても、
firefox3.5とIE系では、フォントの見た目が変わってしまうのは、
回避できないのでしょうか?
よろしくお願いいたします。

Aベストアンサー

> ieで表示が変わったので、
IEはかなりいい加減な表記でも、それなりに解釈して対応してくれる非常に優れたブラウザです。
その為に誤ったHTMLやCSSでも気付かないで、それを正しいと思い込む人を増やしています。


font-family: 候補1,候補2,sans-serif;

のように表記してください。
候補1がなければ候補2、それもなければ次のを適用するようになっています。
最終的にはなければ、sans-serif等のブラウザ側で設定されているのが適用されます。
あと、sans-serifのみで指定するとIE 5.5で文字化けします。

http://mozilla.gr.jp/standards/webtips0007.html

一部のブラウザ(Safari)ですが、半角英数でのフォント名しか受け付けない場合もあるので、
次のように同じフォントをローマ字と日本語名で指定するような必要もあります。
font-family: "MS UI Gothic","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Osaka",sans-serif;

http://tangerine.sweetstyle.jp/?eid=480019


あまりこだわらない方がいいです。
どうしてもという場合は画像で。
本文全文だと、修正が面倒だしファイルサイズも肥大化するから、ロゴとか見出し程度にか使えないだろうけど。

> ieで表示が変わったので、
IEはかなりいい加減な表記でも、それなりに解釈して対応してくれる非常に優れたブラウザです。
その為に誤ったHTMLやCSSでも気付かないで、それを正しいと思い込む人を増やしています。


font-family: 候補1,候補2,sans-serif;

のように表記してください。
候補1がなければ候補2、それもなければ次のを適用するようになっています。
最終的にはなければ、sans-serif等のブラウザ側で設定されているのが適用されます。
あと、sans-serifのみで指定するとIE 5.5で文字化けし...続きを読む

Qスマホでテキストボックスの随時キー入力判定方法

テキストボックスがあり、そこに入力された文字列をキー入力の度に
取得し、その文字列をキーにDBを検索し結果を表示するシステムを
作成しています。ただし日本語入力に関しては変換中は無視して確定時に
DBの検索を行う仕様です。

JQueryのkeydownとkeyupイベントを利用してPCでは実現しています。
ただ、スマホ(Androidやiphone)だと、日本語入力の時に予測変換候補
みたいなのが表示されて、それを選んで入力を進める事が多いと思いますが、
この予測変換候補を選んでもkeydownもkeyupもkeypressもイベントが
発生しないようなので、随時入力文字列を取得する事ができません。
そこで、keydownやkeyupイベントではなくて、タイマーで一定間隔で
テキストボックスの入力文字を取得する事も試してみましたが、この
場合だと日本語変換途中も文字も取得できてしまい、さらに日本語変換中
かどうかの情報が得られないので、変換中は無視という要件が満たせません。

keydownもkeyupもkeypressも発生しないので、どうしようもなさそうな
気はしていますが、ダメ元で、何か良い方法がないかお知恵を借りたく
投稿させてもらいます。宜しくお願いします。

テキストボックスがあり、そこに入力された文字列をキー入力の度に
取得し、その文字列をキーにDBを検索し結果を表示するシステムを
作成しています。ただし日本語入力に関しては変換中は無視して確定時に
DBの検索を行う仕様です。

JQueryのkeydownとkeyupイベントを利用してPCでは実現しています。
ただ、スマホ(Androidやiphone)だと、日本語入力の時に予測変換候補
みたいなのが表示されて、それを選んで入力を進める事が多いと思いますが、
この予測変換候補を選んでもkeydownもkeyupもkeypressもイ...続きを読む

Aベストアンサー

こんにちは。

では、テキストボックスにフォーカスされている場合、
ウィンドウのどこを押してもvalを取得するというふうに変えてもダメですかね?
$(function(){
$("input:text").on("focus", function(){
$(window).on("click blur keydown keyup keypress change touchstart", function(){
var new_val = $("input:text").val();
$(".text").text(new_val);
});
});
});

さっきご飯食べながらだったので、
今ちょっと、作ってみました。
テキストエリアのリアルタイム取得で下のテキスト<p>に反映するみたいなのを。

私のアンドロイド5.1.1は大丈夫だったんですけど、iosは自信ないです。


人気Q&Aランキング

おすすめ情報