dreamweaver Macで確認すると

質問

少し前にも質問したのですが、カテゴリーが違ったのか回答を得られなかったので、再度カテゴリーを変えて質問させてもらいました。

Windows XPでソフトはdreamweaverを使ってホームページを作成しています。
アップした後、Windowsで確認する分には問題なく見れるのですが、Macから確認すると画像や文字の位置がズレてしまいます。

どなたか原因が分かる方、教えて下さい。
宜しくお願い致します。

回答No.1

345itati · ベストアンサー

実際にソースを見ないと、何故ずれるかははっきり断言出来ませんが、Windowsでも確認するブラウザがIE、Firefox、Netscape、Operaなどレンダリングエンジンが違えば、若干変わる場合はあります。
Macでは標準フォントサイズが違いますし、ブラウザでもSafariは上記のブラウザとは違うレンダリングエンジン搭載の為に、レイアウトに若干差が出ます。
致命的にずれる(重なる、レイアウトが崩壊してまともに見られない等)ようであればソースに修正を加えなければなりません。
WindowsでもIE以外でFirefox、Netscape、Opera等できっちり動作確認出来ていれば、Mac側でもそんなに変わらないと思いますが。
(Mac IEはちと難ありですが^^;

お礼

お礼が遅くなってしまい申し訳ないです。。
詳しい説明をありがとうございます。

パソコンに疎い者で。。（-д-;）
レンダリングエンジンについても勉強したい思います。

作っているホームページのうちの問題があるページを載せさせていただきます。
http://els-company.hp.infoseek.co.jp/jigyo/buturyu/kiki/electric/electricmanual/electricmanualstacker.html

Windowsで見る分には問題が無いのですがMacで見ると画像がずれています。。
これは画像の部分のタグです。↓
<div id="Layer50"><a href="shouhin/electricmanualstacker-ems-a1000.html"><img src="../../../../../gazou/electricmanualstacker/Electric Manual Stackersmall.jpg" alt="ems-a1000" width="135" height="206" border="1" /></a></div>
もし修正しないといけない部分がありましたら、教えて頂けないでしょうか。。
宜しくお願いいたします。

回答No.2

345itati

Mac Firefox,Opera,IEでは特に重なっていませんが、Safariでは重なりますね。

改行を入れて上のボックスが伸びてしまっているのに、画像の位置がページ左上からの絶対位置指定になっているので重なるのだと思います。
この状態で修正するには、余計な改行を入れない事と、line-heightを使って行の高さを固定してやれば、ボックスが意図しない高さに伸びる事は無いのでは。

ただ、ソースを見ると各ボックスがposition: absolute;で位置を指定しているので、文字の大きさを変えた時に重なってしまい、余りいい作り方では無いと思います。
marginとpaddingを使って余白を設定して、相対的に位置指定をする方が、ユーザーアクセシビリティに配慮したページになるのではないでしょうか。

お礼

度々、度々、お礼が遅くなってしまい申し訳ありません。。

まだまだ知らないことばかりです。
こつこつと勉強していきたいと思います。
ご丁寧な回答をありがとうございました。