画像上に文字を表示するとiPhoneで位置がずれる

質問

ホームページで時間に応じて2行のテキストを時計画像の上に表示したいのですが
以下のCSSを使った方法ではPCやアンドロイドではズレないで表示されます。
ただし親のiPhoneを借りて見ると
何故か文字位置が下の方にずれてしまい画像から文字がはみ出してしまいます。
ブラウザは標準ではいってるやつ（Safari？）です。

<div style="position: relative;">
<img src="hoge.jpg" width=250 height=46>
<div style="position:absolute; top:6px; left:20px;">
<table border=0 cellspacing=0 cellpadding=0>
<tr><td>この文章は</td></tr>
<tr><td>サンプルですよ</td></tr>
</table>
</div>
</div>

どうもiPhoneのSafariはフォントサイズを自動で調整する機能があるそうで
それを解除するために以下のCSSを追加してみました。
-webkit-text-size-adjust: none;

このCSSを追加するとフォントサイズは変えていなくても表示は小さくなり
位置ずれはマシにはなりました。
が、それでも行間が大きいためか画像からははみ出しています。
テーブル部分を2個に分離してそれぞれ位置を修正すれば、と思ったのですが
それだとSafari以外は詰まって表示されてしまいますよね・・・シクシク。

他のブラウザならともかくiPhoneの標準ブラウザなので何とか直したいです。
これを修正できる方法をご存知の方はおられますでしょうか？
画像の上に文字を表示できるのでしたら、
上記のCSSとはまったく別のものになっても構いません。

よろしくおねがいします。

回答No.1

ORUKA1951 · ベストアンサー

それが背景画像でしたら、背景で指定しましょう。位置が時間によって変わるのでなければ背景をcoverで置けばよいです。
　tableを配置のために使用するのは禁止です。tableは表のマークアップ以外に使用すべきではありません。
　位置指定は、親になるコンテナブロックに対して相対的/絶対配置で指定すると良いでしょう。
　HTML要素のstyle属性で指定すると、詳細度が[1,0,0,0]となってしまって外部スタイルシートなどで調整できなくなります。CSS3のメディアクエリ（Media Queries）を使用して端末の幅に合わせてスタイルを切り替えることができなくなります。

<div class="TimeMessage">
　<p>この文章は、</p>
　<p>サンプルです</p>
</div>
div.TimeMessage{width:250px;height:46px;margin:0 auto;background:url(hoge.gif);}
div.TimeMessage p{font-size:14px;margin:0;line-height:20px;padding-left:20px;}

※折角、文書構造とプレゼンテーションの分離のためにスタイルシートを使うのですから、HTMLにはプレゼンテーションに関わることは一切記述したらダメです。tableが配置目的なら無論です。
　こうしておけば、スタイルシートを書き換えるだけで、背景をやめることも、すべてのページの<div class="TimeMessage">のデザインを変更できます。

お礼

ご回答ありがとうございます。
ほう・・・背景にしてしまうのですか、なるほど。
時計のフレームなので背景でも問題ないです。
CSSは個人サイトを運用する上で趣味の一環として始めたばかりなので
使い方のほうもとても参考になりました！
ありがとうございました。