• ベストアンサー

IEとfirefox、行間の表示が異なってしまう

ulタグをline-heightで行間指定した場合、firefoxとIEでは表示が異なってしまいます。 firefoxでちょうど良い行間にするとIEでは詰まりすぎて文字がつぶれてしまったり。 解消方法を教えていただけないでしょうか?

noname#93029
noname#93029
  • HTML
  • 回答数4
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • goldfox
  • ベストアンサー率49% (123/249)
回答No.1

line-heightの数値はpx指定ですか?%指定ですか? IEはpxやptなどでフォントサイズを固定できますが、Firefoxではフォントサイズの固定ができません。 行間をpxなど固定サイズで指定していたとき、文字サイズが変われば行間も見た目が変わってしまいます。 「行間を指定する」 http://www.tagindex.com/stylesheet/text_font/line_height.html 「スタイルシートで使用する長さの単位」 http://www.tagindex.com/stylesheet/basic/length.html

noname#93029
質問者

お礼

お返事ありがとうございました。 フォントサイズ、行間ともに%指定しています。

その他の回答 (3)

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.4

例えば背景をノートの罫線にするなどして、1pxでも差が出ると困るようなレイアウトにしてませんか?ブラウザによって誤差が生じるのは当然なのでそれを許容できるレイアウトにすべきです。

  • k0021
  • ベストアンサー率26% (32/120)
回答No.3

たしかにfirefoxとIEではたしかに違いますね 私の場合下記のように 文字の大きさ(font-size)/行送り(font-height) を指定いしていますので firefoxとIEでは、ulタグ以外も文字の大きさ異なりますが何も問題ないです font:17px/150% serif,Times; javascriptの場合下記URLを参考にしてね 私はIEと他のOSで分けていますがOperaでは、異なって表示される問題が有るので修正検討中の元です

参考URL:
http://www.openspc2.org/reibun/javascript/browser/018/
  • tobi-u-o
  • ベストアンサー率18% (44/242)
回答No.2

ブラウザごとにスタイルシートを用意したり するのがいいかもしれません。 今の時代、色々なブラウザに対応させるのが いいと思います。

noname#93029
質問者

お礼

ブラウザごとにcssを指定すればいいのでしょうが、javascriptでの指定の方法がいまいちわからなくて。。。

関連するQ&A

  • IEと他ブラウザでの行間について

    CSSにてレイアウトを行っていますが、IEで表示したとき行間が詰まってしまいます。 全体的に狭くなってしまうのはもちろんなのですが、 たとえば文章と文章の間を<br><br>で一行開けた場合も、Firefoxなどでは -------------- 一行目 二行目 -------------- となってくれるのですが、IEだと -------------- 一行目 二行目 -------------- につまってしまいます。 作成環境はMacOSX、DreamweaverCS3 確認はmacでFirefox3、Safari3、Opera9.5、Netscape7.1です winでIE6、Firefox3です。 ブラウザ間の表示誤差をできるだけ少なくするにはどのような指定方法がよいのでしょうか? CSSのフォント関係の指定の部分のみ抜粋します。 html {font-family:'Verdana', sans-serif; color:#444444; font-size:66%; line-height:2.0; letter-spacing :0.2em; } これは小さなことなのですが、他にもIEでの表示でつまづくことが多いので困っています。

    • ベストアンサー
    • HTML
  • リストタグ firefoxでは表示されるがIE7ではマーカーが表示されない

    ご教授ください。 リストタグで、<ul>と<ol>を入れ子で使っています。 firefoxでは意図どおりに表示されるのですが、IE7ではマーカーがどちらも表示されません。 [html] (略) <ol><li>こんなことをしています</li>   <li>あんなこともしています   <ul><li>あんなことその1</li>     <li>あんなことその2</li>     <li>あんなことその3</li></ul></li>     <li>ちょっとしたこともしてます</li>   <li>どえらいこともしています</li>   </ol> (略) [css] ol { list-style-type:decimal; line-height:1.6em; width:600px; } ul { list-style-type:disc; line-height:1.2em; width:600px; } [firefoxでは] 1.こんなことをしています 2.あんなこともしています  ・あんなことその1  ・あんなことその2  ・あんなことその3 3.ちょっとしたこともしてます 4.どえらいこともしています [IE7では] こんなことをしています あんなこともしています  あんなことその1  あんなことその2  あんなことその3 ちょっとしたこともしてます どえらいこともしています このように表示されます。 以前、同じようにリストタグを使ったときはできたような気がするのですが、何か間違っているのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FireFoxとIEでの「border」の表示について

    いつもお世話になっています。 HTMLタグの<TABLE>で表を作りborder=0を指定したところIEとFireFoxでは違う表示がされ困っています。 【IEの場合】 罫線が表示されなくなる 【FireFoxの場合】 外枠線は表示されず内側の線だけが表示される 上記の問題をFireFoxでも非表示にしたいのですがなにか良い方法はないでしょうか? よろしくお願い致します。

  • 行間があかない

    PHPでプログラムを組んでいます。 Firefoxでは行間(line-height)があくのですが、IEではあきません。 行間があかない、つまり指定なしの行間となってしまいます。 $tag_new .= $i . ".<a href =./index.php?mode=diary&id=' . $row[id] . '>" . $title . "</a><img src = ./images/new.gif><br />\n"; とプログラムを組んで、 <div class="new">新着コラム<br /> {$tag_new}</div> と表示しています。 ふしぎなことに、新着コラムとつぎの行だけ行間があきます。 Firefoxではすべてあきます。 Cssでは .new { width:210px; text-align: left; line-height: 24px; float:left; margin: 10 10 10 0; padding: 5; border:1px solid #800000; clear : left; } としています。 解消法あれば教えてください。

    • ベストアンサー
    • HTML
  • Firefoxのブックマークの行間を広げたい

    乗換えを考えて、Firefox 1.5.0.2 日本語版 for windowsをインストールしてみたのですが、ブックマークの行間が狭すぎて、見ずらいです。 フォントもココロなしかIEとは違って、文字間隔も狭いような・・・。 ゆったりとした行間、フォントに変更する方法はありますか?

  • IE8とIE9の文字間・行間

    ウェブサイトを作っています。 IE8と、IE9でそれぞれ見ると、IE9のほうが文字間・行間が詰まるのですが、何か解決方法はないでしょうか。 フォントはメイリオを使用しています。 ブラウザの「表示」→「文字サイズ」でサイズを変更できるように、フォントサイズは%指定にしています。 ご存知の方いらっしゃいましたら教えてください。。 よろしくお願い致します。

  • Dreamweaverでの行間の指定について

    現在、Dreamweaver8(Win版)でホームページを作成中の初心者です。 そこで行間の指定に、CSSで「line-height」を使ってるのですが、IE7でプレビューした時の行間と、firefoxで見た場合の行間が違い、デザインが壊れてしまうのです。(単位は使ってません) どちらのブラウザでも、同じように見える作成方法があるのでしょうか? 色々調べてみたんですが、解決できなかったので、質問させていただきました。 どうかご回答の程よろしくお願い致します。

  • 行間が詰めれない

    HP作成でテーブル内の行間がどうしても詰めれません。 line-heightで指定しているのですが、、、 html、cssとも設定する方法をご教授下さい。 この状態は 空きすぎているのです ↓ 例えばこのように したいのです。

  • CSS行間設定について困っています

    gooブログのCSS編集で、エントリー本文の行間を広くさせようと思い、 line-height:200%;で広く設定していて、今までうまくいっていました。 最近また少し背景画像や文字色など編集しようと思い、色々編集していたのですが、(この時に行間については何も変更していない)、この編集が終わった後に、自分のブログを見てみると、Firefoxでは正常なのですが、IEではなぜか行間がちゃんとCSSでの設定どおりになっているところとそうでないところとで、まばらなかんじになってしまって・・・。 想定される原因や解決法がお分かりの方がいらっしゃいましたら教えていただけないでしょうか。よろしくお願いいたします。

  • BRのCSSをつかって行間を統一

    HTMLのBRを使用して改行を行っていますが、 FireFoxとIEとで行間が違ってきてしまいます。 行間をそろえるためにline-heightで統一したいのですが、 BRのCSSをつかって行間を統一することは可能でしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML