同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象
まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
(Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです)
問題を極力単純化しようと余計な文章を省いた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">
<!--
table{
border-collapse: collapse;border-spacing: 0;
width: 60%;
margin-bottom: 30px;
border: 1px solid #DDD;
table-layout:fixed;
}
th{
border: 1px solid #DDD;
color: #333;
padding: 10px 20px;
}
td{
border: 1px solid #DDD;
color: #333;
padding: 5px;
}
.title{ width:12em;}
.compose,.long{ width:4em;text-align:center;}
.value{ width:6em;text-align:center;}
th.genre { background: #E5F2F8;}
-->
</style>
<table>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
</table>
</body>
</html>
No.3
- 回答日時:
#2 です。
ふと気が付いたので補足を。
> IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、
IE8 と Google Chrome 5 のウインドウサイズが異なれば、<table> の幅も一致しません。
ウインドウサイズに応じて可変するものなので、当たり前といえば当たり前ですが、念のため。
No.2ベストアンサー
- 回答日時:
この場合の幅というのは <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 を指定する (代償にアクセシビリティが下がります。「幅を完全に統一にしたい」という要望なら避けられない問題ですが…。)
デフォルトスタイルシートはあてになりませんので、他にもあやしそうなプロパティを探してリセットしてみてください。
回答ありがとうございます。
言葉が不足していてすみませんでした。
テーブルの幅の違いも気になったのですが、実はこれは100%に指定しまうので3つのブラウザでの表示はあまり変わらないのです。
マージンやパディングには要注意なのですね。
今回は単位を直すことでなんとかなりましたが、覚えておきます。
またこのような初歩的なことをお尋ねするかもしれませんが、よろしくお願いします。
ありがとうございました。
No.1
- 回答日時:
tableのwidthを60%とされていますが、trには別に12emなどを指定されていたりと単位がバラバラな気がするのですが・・・
まずemにするか%にするかを決定された方が良いのではないでしょうか。
tableの場合はborderを使われるのでしたらpxをオススメしますが・・・
回答ありがとうございます。
全体のデザインがパーセントによって指定されていたのですが、表の内側だけは○文字分と指定したかったのです・・・。
色々といじった結果、ご指摘のとおり単位にemを使ったのがまずかったらしく、パーセントに直すことでおおむね同じように表示されるようになりました。
ただ、どうしてそうなるのかは分かっていません(汗
とにかく、おかげさまで解決することができました!
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
ブラウザによってテーブルのセルの高さが変わる
HTML・CSS
-
IE と Edge の表示フォントを同じにするには?
InternetExplorer(IE)
-
widthやheightの数値に単位(px)はつけない方が良いの?
HTML・CSS
-
-
4
テーブルの幅を固定するとnowrapがきかなくなるのですが・・・
HTML・CSS
-
5
tableの位置がIEとその他ブラウザでずれる
HTML・CSS
-
6
IEからEdgeへの移行に伴うIMEの状態(ime-mode)
HTML・CSS
-
7
window.Openをモーダルにできますか?
JavaScript
-
8
JSPやサーブレットでSystem.out.println()などでコンソールに出力できますでしょうか?
Java
-
9
resizeToメソッドが動作しません
JavaScript
-
10
テーブルのヘッダとボディの幅がズレルのを防ぐ
HTML・CSS
-
11
自分が書いているCSSのバージョンが分からない
ホームページ作成・プログラミング
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
テーブルとテーブルの間隔について
-
HTML tableのセルにtextareaを...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
tableの位置がIEとその他ブラウ...
-
同じ幅指定のつもりなのに、ブ...
-
<table>のclass指定が継承されない
-
スタイルの無効化
-
HTMLのテーブルをExcelにCopy&P...
-
親要素のwidthは子要素のwidth...
-
table 幅固定で、端までいった...
-
tableタグの枠線について
-
パソコンで見るとレイアウトが...
-
テーブル内セルの大きさが途中...
-
html table の中のボーダーが二...
-
CSSで特定のテーブルだけに...
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
テーブル内のセル間にスペース...
-
textareaの外側の文字が下付き...
-
HTML tableのセルにtextareaを...
-
テーブルデータを折り返して表...
-
tableの位置がIEとその他ブラウ...
-
<fieldset>タグについて
-
正規表現で「より前」と「より後」
-
スタイルシートで左側だけ色を...
-
tableのcellpadding="0" cellsp...
-
tableを縦に続けるとtable間の...
-
HTMLのテーブルをExcelにCopy&P...
-
html5のテーブル内でdivのタブ...
-
スタイルの無効化
おすすめ情報