文字の位置、上下のマージンがずれる

質問

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family： "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic"；
font-size： 14px；
line-height： 1；
margin： 0；
padding： 0；

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE８だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE９だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか？

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか？

回答No.3

ixkaito · ベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

お礼

ixkaitoさん、回答ありがとうございます。
line-heightを相対的な指定にするとブラウザ間での差が生じるんですね。
確かにline-heightに絶対値を指定するとぴったりとなります。

reset.cssはよく使うのですが、
ブラウザのデフォルト環境をリセットした状態で、
font-sizeに％で相対的な指定を行ったり、pxで絶対的な指定を行っても、
line-heightに相対的な指定を行うとなぜずれるのかが不思議でした。

今回のfont-familyの指定だと、
win環境(ヒラギノが入ってないもの)だとMS Pゴシックで、
Mac Safariだとヒラギノ角ゴシックになるようにしてありますが、
書体の違うSafariがIE6/7、Chrome、Firefoxとピッタリなのに、
IE8と9だけが上下のmarginがズレてしまうんですよね。
(文字と文字の間のズレはどのブラウザでもやはり生じてしまいますね…）

ただ、pxでfont-sizeを指定してもline-heightに相対的な指定を行った場合は
必ず誤差が生じるということがお聞きできたので、当然のものと捉えられて安心しました。

ブラウザの仕様って奥が深いですね。。

回答No.2

ORUKA1951

DTP ( http://ja.wikipedia.org/wiki/DTP )やワープロとHTMLは、まったく異なります。
前者は、どのように配置し印刷するかを指定するもので、機械や第三者には内容自体を理解することはできません。HTMLは、どこが見出しで、どこからどこまでがひとつの段落で、どこが引用なのか--という文書構造を示すものです。それをどのように表示するかはスタイルシートで指定しますが、それはずれて当たり前、ずれても良いという前提です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
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 )］より

　ブラウザ、OSを含め、どの利用形態であっても文書構造が正しく伝わること--それが最も重要なコーディング--デザインなのです。
「テキストをぴったりを合わせる技術ってないのでしょうか？ 」
　のような些細なことにこだわってはダメなのです。

　その上で、説明すると
font-family： "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic"；
　必ず、総称ファミリ名を最後に書きます。羅列されたフォントが無いときに利用されます。
font-size： 14px；
line-height： 1；
　字の大きな日本語の場合、ブラウザが持つデフォルトのスタイルシートによるline-heightは小さすぎます。通常は1.4em～1.6em程度が読みやすいでしょう。代わりに段落が変わると一文字、字下げして段落が変わったことを示します。
margin： 0；
padding： 0；

　よって
p{line-height:1.6em;margin:0;text-indent:1em;}
　と指定すると良いでしょう。

「ul,ol,li,dl,dt,dd」についても、ブラウザによってmarginやpaddingの指定が微妙に異なりますから、必要なら
ul,ol,dl{margin:0.5em 1em;padding:0;}
li{list-style-position:outside;}
li,dd{text-indent:1em;margin:0 0 0 2em;line-height:1.4em;}
などと指定することがあります。
　★ただし、あまり使用せず、ブラウザのデフォルトのスタイルに任せてブラウザ間の誤差は気にしないほうが良いです。視覚障害者はフォントを大きくして利用したりしますのでね。

　ウェブページのデザインは、DTPやワープロとまったく異なるものである。多少ずれようが無視できる度量が必要なのですよ。

お礼

ORUKA1951さん、回答ありがとうございます。
確かにテキストの誤差を気にしてはいけないですよね。

私もやはり、ユーザビリティの観点から、

・font-sizeは相対的であるべき、
・文字の読み上げを意識した正しい文書構造でコーディングを行うべき、

と思います。

ただ、（私自身、趣味からコーディングをはじめたレベルですが）
会社で制作をお願いされることがありまして、
「サイズは固定してくれ」と言われることが多いのです。

会社の人たちは、そういった本質の部分を説明しても、
やはりブラウザ間でのレイアウトの誤差を気にされるんですよね。

これからは、納得してもらえるように
もう少し頑張ってみたいと思います。

回答ありがとうございました！

回答No.1

naokita

CSS誤記・・・
差異云々の話はまだ早いのでは？

line-height: 1; は各行の高さが１フォント分って事ですよ。
基本：文章にheightは使わない。

因みに、複雑なデザインによりますが“全て”を100%完璧に揃えるのは無理です。

お礼

naokitaさん、回答ありがとうございます。

今回、ブラウザごとのテキスト1行あたりの差を厳密に確認するために
line-heightを1にしていました。

font-sizeを14pxに固定し、line-heightを1と指定しても、
やはりブラウザ間での誤差が生じることが見てとれました。

たった2行のテキストでこれですから、
おっしゃるように複雑なデザインによりますが、
全てを100%完璧に揃えるのは無理でしょうね。

各ボックスモデルの解釈がどうなっているか、
個人的に理解できていなかったので、
精通されている方、仕事をされている方の対処方法や解釈が知りたかったのです。
これを機に、より一層、勉強をしたいと思います。

迅速な回答ありがとうございましたm(＿ ＿)m