1374851898 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>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/27 00:18:18
  • 終了:2013/07/28 10:53:28

ベストアンサー

id:cno No.2

cno回答回数124ベストアンサー獲得回数122013/07/27 20:30:51

ポイント33pt

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;">

です。

他1件のコメントを見る
id:cno

それでは580pxという高さがIE8では足りない(フォントなどの違いによって
必要なスペースがブラウザごとに変わる)ことが考えれれます。

高さの指定は未指定で(auto)ではだめでしょうか?

<div id="s1">

のような感じです。

2013/07/28 08:26:08
id:kaji0245

これで若干よくなりました。
ありがとうございます。

2013/07/28 10:52:47

その他の回答(2件)

id:dawakaki No.1

だわかき回答回数797ベストアンサー獲得回数1222013/07/27 10:38:14

ポイント34pt
<section id="s1" style="height:580px;">

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

id:kaji0245

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

2013/07/27 14:03:07
id:dawakaki

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

2013/07/28 11:44:16
id:cno No.2

cno回答回数124ベストアンサー獲得回数122013/07/27 20:30:51ここでベストアンサー

ポイント33pt

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;">

です。

他1件のコメントを見る
id:cno

それでは580pxという高さがIE8では足りない(フォントなどの違いによって
必要なスペースがブラウザごとに変わる)ことが考えれれます。

高さの指定は未指定で(auto)ではだめでしょうか?

<div id="s1">

のような感じです。

2013/07/28 08:26:08
id:kaji0245

これで若干よくなりました。
ありがとうございます。

2013/07/28 10:52:47
id:holoholobird No.3

holoholobird回答回数574ベストアンサー獲得回数1042013/07/28 08:27:33

ポイント33pt

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

id:holoholobird

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

2013/07/28 08:31:51
id:kaji0245

試してみましたが、しっくりこないです。

2013/07/28 10:53:11
  • id:rouge_2008
    提示されたコードだけでは原因が分かりません。
    スタイルシートは、外部CSSとしてlinkタグでCSSファイルで読み込んでいるのでしょうか?
    一旦CSSを外して表示を確認してみてください。

    ※「<h4>正社員</h4>」が添付画像の見出し「正社員募集要項」に相当するのでしょうか?
    「<h4>~</h4>」から「</table><br>」までが1つの職種の募集要項だと思います。
    提示されたコードの下にさらに「<h4>パート・アルバイト募集要項</h4>」から「</table><br>」が続くのでしょうか?
    それとも「<section id="s1" style="height:580px;">」の閉じタグがあって、その後に上記内容でパート・アルバイト募集要項が続くのでしょうか?
    CSSを外して問題が解決した場合は、パート・アルバイト募集要項の見出しあるいはボックスに適用されたCSSに問題がないか確認してみてください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません