ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 11 years ago

Closed 11 years ago

#4323 closed defect (fixed)

【公式SNS】IE8でレイアウトが崩れる

Reported by: kiwa Owned by: takai
Priority: minor Milestone:
Component: 指定しない Version:
Keywords: OpenPNE公式SNS Cc:

Description (last modified by kiwa)

■現象

IE8にてマイホームの最新情報の見だしが正しく表示されない現象が発生している。

キャプチャ画像

これ以外にもIE8でレイアウトが崩れていないか調査し、対応する。

■原因

■修正内容

■関連情報

Attachments (1)

sns_openpne_jp-h_home-ie8.png (33.1 KB) - added by kiwa 11 years ago.
キャプチャ画像

Download all attachments as: .zip

Change History (7)

Changed 11 years ago by kiwa

キャプチャ画像

comment:1 Changed 11 years ago by kiwa

Description: modified (diff)

comment:2 Changed 11 years ago by kiwa

Keywords: OpenPNE公式SNS added; OpenPNE公式 removed

comment:3 Changed 11 years ago by takai

Status: newassigned

検証しました。

備忘録として状況を確認しておきます。

現状

当該部分は、2次元の表データではないにもかかわらず、2.10系の見栄えを実現するためにtable関連要素でマークアップされている。

この前提のまま、見栄えを変更するためにCSSでpositionプロパティを用いて現在の見栄えを実現している。

問題

IE8 ではこのチケットの通り、崩れてしまっている。

やろうとしていること

table > tr > th, td という構造に対して、以下のような指定をしている。

  • tr {block, relative, padding-top}
    • display: block にすることで、position: relativeの効果やpaddingが有効になる
  • th {absolute}
    • tr を基点に配置している
  • td
    • tr の padding-top だけ上部に余白を持って、td要素が display: table-cell で配置されている

原因

CSSの実装不備が複合的な形で現れ、結果的に(IE6, IE7では崩れず)IE8が崩れている。

Firefox等のモダンブラウザで崩れない理由

  • tr要素が display: block になっている
    • position: relative によりth要素の基点になっている
    • padding-top 指定により、th要素の高さ分の余白がtd要素の上部に確保されている

IE6, 7 で崩れない理由

  • tr要素が display: block になっていない
    • IEでは、テーブル関連要素への display プロパティ指定が効かない
  • tr要素が display: table-row であるにもかかわらず、position: relative によりth要素の基点になっている
    • IE6, 7の独自実装によるもの(CSSの仕様で「基点にしてはいけない」と定められているわけでもない)
  • tr要素の padding-top が無効な分、td要素へ padding-top が指定(加算)されている

IE8 で崩れる理由

  • tr要素が display: block になっていない
    • IE8ですら、テーブル関連要素への display プロパティ指定が効かない
  • tr要素が display: table-row であるために、position: relative が指定されていてもth要素の基点になっていない
  • IE8を対象ブラウザとして想定していなかったため、そのための対応スタイル記述がなかった

対応方法

対応方法は3つ挙げられる。

  • IE8に対する、対応スタイル記述を行う
  • IE8は、IE7以前のレンダリングをエミュレートすることができるので、IE7としてレンダリングさせる
  • 見栄えのための無理なHTMLマークアップをやめて、抜本的にHTML/CSSを書き直す

CSSを変更するだけであれば、1つ目の対応策となる。

html>/**/body #Center .homeMainTable th,
html>/**/body #Center .homeMainTable td {
	position : static\9;
	float: left\9;
}

を追加する(現状のスタイルは、削除するなどすると面倒なので、そのままでよい)。


テンプレートの head 要素部を変更してもよいのであれば、2つ目の対応方法となる。

(他のブラウザへの影響がないので単純に追加してしまってもよいが)IE8に限って

<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />

を追加する。

参考 : IE8のモードスイッチ | Web標準Blog | ミツエーリンクス


HTML/CSS あるいは CSS のみを抜本的に修正する3つ目の対応方法については、本件のために抜本的にソースを変更するのは好ましくないため、保留しておく。

comment:4 Changed 11 years ago by takai

Keywords: 確認中 added

公式SNSのカスタムCSSを変更(追加のみ)しておきました。

comment:5 in reply to:  3 Changed 11 years ago by takai

IE8 CSS hack としての記述が不正確でした。

html>/**/body #Center .homeMainTable th,
html>/**/body #Center .homeMainTable td {
	position : static\9;
	float: left\9;
}

と示しましたが、正しくは以下の通りです。

html>/**/body #Center .homeMainTable th,
html>/**/body #Center .homeMainTable td {
	position /*\**/: static\9;
	float: left\9;
}

comment:6 Changed 11 years ago by kiwa

Keywords: 確認中 removed
Resolution: fixed
Status: assignedclosed

Win IE8 にてhomeMainTableの項目名が問題なく表示されることを確認しました。報告いただいた方の確認も完了したので、このチケットはfixします。

Note: See TracTickets for help on using tickets.