• 締切済み

ブラウザの行ピッチの違い

IEとChromeで同じようにhtnlを記述しても行の高さが変わってしまいます。 line-height:1.2em; と指定 していますが、少しズレてしまいます。 ぴったり合わせることは出来ないんでしょうか?

  • dyo
  • お礼率1% (12/711)
  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

emは、exとともに相対サイズです。 Syntax and basic data types ( http://www.w3.org/TR/CSS2/syndata.html#length-units )  基準とする値が決められていない限りは、ブラウザによって差が出ます。 絶対サイズには ・in: inches — 1in is equal to 2.54cm. ・cm: centimeters ・mm: millimeters ・pt: points — the points used by CSS are equal to 1/72nd of 1in. ・pc: picas — 1pc is equal to 12pt. ・px: pixel units — 1px is equal to 0.75pt. がありますので、事前に body{font-size:13px;}とか指定してあれば、差は減らすことができます。 ただし、フォントサイズが問題になるデザインはウェブデザインとしては、とてもまずいことです。ユーザーは場合によったらフォントサイズは変えて閲覧しますし、使用するフォントも様々です。 【引用】____________ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より  ブラウザひとつとっても、IE,Firefox,Opera,safari,googleChrome,、さらにOSも様々です。当然使用可能なフォントも異なります。ウェブデザインとは、印刷物と異なり様々な媒体で情報が共有できるためのもので、特定のブラウザでの見栄えは二の次、三の次です。  大きくずれたって構わない・・・それが本当のウェブデザイナーの腕の見せ所。

  • chie65535
  • ベストアンサー率43% (8514/19356)
回答No.1

htmlの仕様では「どのような文字フォント、そのような文字サイズ、どのような文字ピッチ、どのような行ピッチで表示されるかは、決まりが無い」ので、ピッタリに合わせる事は出来ません。 視覚的デザインを「どのブラウザでも同じにする」には、画像として表示するか、フラッシュなどブラウザに依存しない物で表示するしかありません。

関連するQ&A

  • IE と chromeの行ピッチ?につい

    HTMLで IE と chromeではTD内の行ピッチが微妙に違いますがどうすれば同じでできますか? TD内で自動改行するような文章の場合、chromeの方が縦に長くなる。チッピが大きい? <td>~</td>

    • ベストアンサー
    • HTML
  • 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
  • htmlのブラウザごとの表示について

    <hr color="#FF0000" size="1" noshade> というタグを使って赤いラインを一本引きたいのですが、 これをIE11で見ると綺麗に赤線が一本引かれているのですが Chromeの最新版で見るとグレーの横線に変わってしまいます。 noshadeを外すとChromeでも赤いラインに変わります。 Chromeでも赤いラインに見えるようにしたいのですがこれは何がいけないのでしょうか。 セオリー通りに記述していると思うのですが何がいけないのか検討がつきません。 助言いただければ幸いでございます。

    • ベストアンサー
    • HTML
  • htmlについて

    行の高さを指定するにはどのような遣り方が良いですか? 5pxぐらいの改行を入れたい時、IEでは下記の指定でいけますが、chromeだと高さ15px(ぐらい)以下になってくれません。 <td height=5></td>

    • ベストアンサー
    • HTML
  • 【CSS】_font-size: 84%;ってどういう意味の記述?

    CSSの勉強のために、 http://cdn.oshiete.goo.ne.jp/css/oshiete-base.css をながめていたのですが、 font-size: 12px; line-height: 1.4em; /*\*/ _font-size: 84%; /**/ という記述がありました。 この、最後の3行はなんのための記述なのしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 文末に「…」を追加するCSSの記述について

    下記は、ブラウザのサイズが変更されても2行で表示するように記述したものです。 これに文末に「…」を追加するにはどのように記述すれば良いでしょうか? 表示結果 現在 「ああああああああ  ああああああああ」 このように表示したい 「ああああああああ  あああああああ…」 CSS .AAA { margin:0; padding:0px; height:2.6em; line-height:1.4em; overflow:hidden; vertical-align:top; } HTML <p class=AAA>ああああああああああああああああああああああああああああ</p>

    • 締切済み
    • CSS
  • 2行目のブラウザ表示以上を省略

    下記CSSで1行のブラウザ表示以上だと1行目の表示以上は省略されるが 1行は省略されなく折り返し 2行目のブラウザ表示以上を省略するにはどうしたらいいのでしょうか。 <div id="mapPos" style="height: 3em; width: 96%; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis;"> あああああああああああああああああああああああああああああああああああああああ </div>

    • ベストアンサー
    • CSS
  • ブラウザによる表示の違い

    <a href="リンク先" target=" top">の記述の場合、IEおよびChromeでは別の新しいタブにリンク先が表示されますが、Firefoxでは同じタブに表示されてしまいます。ブラウザによって表示の仕方が違うのでしょうか?

  • IE7 スタイルシート

    今までIE6をユーザー補助で指定されたフォントスタイルを使用しないにチェックを入れ、オープンタイプフォントをスタイルシートで指定して使用してきましたがIE7になると、どうも様子がおかしくなります。 IE6では body { font-size: 1.0em; line-height: 1.1; font-family: "フォント名" } input, textarea, select, tree { font-family: "フォント名" font-weight: normal; font-size: 0.7em; line-height: 1.4; } の様にしてほぼすべてのページに問題なかったのですがIE7にすると、一部のページは以前の様に指定した通りに表示されるのですが、かなりのページが指定した様にはならず標準のフォントで表示されてしまいます。 私自身に知識がないので推測になってしまいますがシンプルなタグで書かれた様なページは大丈夫なようですが、CSSなどを使ったページは指定した様にはならないような気がします。 IE7でIE6の時のように表示させるにはどうしたらよいのでしょうか?

  • ブラウザごとにCSS?

    こんにちは。 HTMLとCSSを使ったホームページを作っています。 確認用のブラウザにSleipnirを使っています。 下のように記述し、ブラウザエンジンを切り替えて見たところ、それぞれ幅が違うことに気づきました。 幅が異なると、デザインもグチャグチャになってくるので、大変困っています。 これを回避、対処する方法を教えて欲しいです。 補足もなるべく早くさせてもらいます。 どうかよろしくお願いします。 <style type="text/css"> div{ border:solid #cccccc 1px; width:750px; margin:5px; } #all{ width:800px; height:auto; text-align:center; } #header{ height:200px; } #main{ height:auto !important; height:15em; min-height:15em; } #footer{ font-size:10px; height:2em; } </style> <div id="all"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div>

    • ベストアンサー
    • HTML

専門家に質問してみよう