同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

解決済

質問者：curious_boy
質問日時：2010/08/01 22:37
回答数：3件

同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
（Lunascapeというブラウザで、３種類のエンジンが選べるので他のエンジンにしてみたのです）
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。

Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。

現状、この重大なエラーを残したまま公開している状態のため、急ぎ直したいのです。

画像は実行したときの症状を、下にはそのソースを載せます。
アドバイス、回答をよろしくお願いします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
</head>
<body>
<style type="text/css">

</style>
<table>
<tr><th class="title">タイトル</th><td class="long">こうもく１</td><td class="value"><span class="d">こうもく２</span></td><td>こうもく３は大切なこうもくです。ほんとうです。</td></tr>
<tr><th class="title">タイトル</th><td class="long">こうもく１</td><td class="value"><span class="d">こうもく２</span></td><td>こうもく３は大切なこうもくです。ほんとうです。</td></tr>
</table>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： think49
回答日時：2010/08/02 00:43

この場合の幅というのは <table> の幅も含めていますか？

IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば

html, body { margin: 0; padding: 0; }

を指定した方が良さそうです。(デフォルトスタイルシートのリセット)
width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。

> Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。
この辺りでしょうか。

・全てのtable関連要素に margin, padding, border を指定する (デフォルトスタイルシートのリセット)
・em を使いつつ、幅を完全に揃えたいのなら、font-size を指定する (代償にアクセシビリティが下がります。「幅を完全に統一にしたい」という要望なら避けられない問題ですが…。)

デフォルトスタイルシートはあてになりませんので、他にもあやしそうなプロパティを探してリセットしてみてください。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

言葉が不足していてすみませんでした。
テーブルの幅の違いも気になったのですが、実はこれは１００％に指定しまうので３つのブラウザでの表示はあまり変わらないのです。

マージンやパディングには要注意なのですね。
今回は単位を直すことでなんとかなりましたが、覚えておきます。

またこのような初歩的なことをお尋ねするかもしれませんが、よろしくお願いします。
ありがとうございました。

通報する

お礼日時：2010/08/02 09:28

No.3

回答者： think49
回答日時：2010/08/02 00:45

#2 です。

ふと気が付いたので補足を。

> IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、
IE8 と Google Chrome 5 のウインドウサイズが異なれば、<table> の幅も一致しません。
ウインドウサイズに応じて可変するものなので、当たり前といえば当たり前ですが、念のため。

- 0
- 件

通報する

No.1

回答者： metametamu
回答日時：2010/08/02 00:00

tableのwidthを60%とされていますが、trには別に12emなどを指定されていたりと単位がバラバラな気がするのですが・・・

まずemにするか%にするかを決定された方が良いのではないでしょうか。
tableの場合はborderを使われるのでしたらpxをオススメしますが・・・

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

全体のデザインがパーセントによって指定されていたのですが、表の内側だけは○文字分と指定したかったのです・・・。
色々といじった結果、ご指摘のとおり単位にemを使ったのがまずかったらしく、パーセントに直すことでおおむね同じように表示されるようになりました。

ただ、どうしてそうなるのかは分かっていません（汗

とにかく、おかげさまで解決することができました！
ありがとうございました。

通報する

お礼日時：2010/08/02 09:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！