人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ie8でレイアウトが画像のように崩れてしまいます。テーブル部分に見出し画像がかぶってしまいますが他のブラウザではOKです。修正ポイントなどアドバイスをいただければ助かります。以下が該当phpファイルです。

<section id="s0"><br><br>
<p class="text2"><br>******************</p>
<section id="s1" style="height:580px;">
<h4>正社員</h4>
<table class="table1"><font size="4" color="#AE0321">****</font>
<tr><th>応募連絡先</th><td>******</td></tr>
<tr><th>職種</th><td>************</td></tr>
<tr><th>仕事内容</th><td>**************</td></tr>
</table><br>

1374851898
●拡大する


●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● だわかき
●34ポイント
<section id="s1" style="height:580px;">

このsectionタグがどこでとじているのか分からない(表下方の画像まで含んでいるのか?)のですが、heightの値を大きくしてみてください。


kaji0245さんのコメント
いや、それではchromeなど他のブラウザに影響がでます。 他ブラウザではぴったりあっているのです。

だわかきさんのコメント
うーん、しかし、heightを絶対値で指定してしまうと、ブラウザによって見え方に違いが出ると思います。 それと、表の下に表示されているバナー(問題の重なっている部分。画像なのかテキストなのかわからないですが)のHTML記述を提示していただかないと、より具体的な回答するが難しいです。

2 ● cno
●33ポイント ベストアンサー

sectionタグですがHTML5から追加されたもので、IE8では対応していないため、
スタイルが無視されてしまうためではないでしょうか?

この辺りが参考になるかと思います。
http://blogs.msdn.com/b/osamum/archive/2011/06/29/html5-internet-explorer.aspx
http://schoolwebapp2012.web.fc2.com/chapter1210.html

古いブラウザでのサポートをお考えでしたら、HTML5やCSS3などの
新し目のものは極力用いない方が良いかと思います。

今回の場合ですと、sectionの代わりにdivを用いることで解決しないでしょうか?

<section id="s1" style="height:580px;">

のところを

<div id="s1" style="height:580px;">

です。


kaji0245さんのコメント
section→divに変えても同じでした。

cnoさんのコメント
それでは580pxという高さがIE8では足りない(フォントなどの違いによって 必要なスペースがブラウザごとに変わる)ことが考えれれます。 高さの指定は未指定で(auto)ではだめでしょうか? >> &lt;div id="s1"> << のような感じです。

kaji0245さんのコメント
これで若干よくなりました。 ありがとうございます。

3 ● holoholobird
●33ポイント

tableのborderとpaddingを0にしてください。


holoholobirdさんのコメント
もしくはここを見ながらIE用にCSSをハックするとか http://www.webcreatorbox.com/tech/css-hack-list/

kaji0245さんのコメント
試してみましたが、しっくりこないです。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ