Project

General

Profile

Bug(バグ) #967

インフォメーション欄が空の場合、IE6でレイアウトが崩れる

Added by Kiwa Sakai over 9 years ago. Updated about 9 years ago.

Status:
Fixed(完了)
Priority:
Normal(通常)
Assignee:
Target version:
Start date:
2010-04-22
Due date:
% Done:

100%

3.6 で発生するか:
Unknown (未調査)
3.8 で発生するか:
Unknown (未調査)

Description

Overview (現象)

information欄が空欄の場合、IE6でレイアウトが崩れる。

【参考画像】
http://kiwpon.tumblr.com/post/540633503/captured-with-gyamblr-for-windows-based-on

再現バージョン

  • OpenPNE3.0.9-dev
  • OpenPNE3.2.7-dev
  • OpenPNE3.4.6-dev
  • OpenPNE3.6beta1-dev

Causes (原因)

バグが発生した原因を記入

Way to fix (修正内容)


Related issues

Related to OpenPNE 3 - Backport(バックポート) #1294: インフォメーション欄が空の場合、IE6でレイアウトが崩れる Won't fix(対応せず) 2010-04-22
Related to OpenPNE 3 - Backport(バックポート) #1295: インフォメーション欄が空の場合、IE6でレイアウトが崩れる Fixed(完了) 2010-04-22
Related to OpenPNE 3 - Backport(バックポート) #1296: インフォメーション欄が空の場合、IE6でレイアウトが崩れる Fixed(完了) 2010-04-22 2010-07-12

Associated revisions

Revision 1a23749e (diff)
Added by Minoru Takai about 9 years ago

(fixes #967) added hasLayout property to InformationBox for IE6

Revision 4cbf8b3b (diff)
Added by Minoru Takai about 9 years ago

(fixes #967) added height property to InformationBox for IE6

History

#1 Updated by Kiwa Sakai over 9 years ago

  • Assignee changed from Shinichi Urabe to Minoru Takai

#2 Updated by Minoru Takai over 9 years ago

.informationBox は、本文が書かれるボックス(div.informationBox > div.body)に対して、min-height: 1.2em が指定されていることで、本文が空の場合も 1.2em (line-height: 1.2 という指定に対応する一行の高さ) が確保されるように OpenPNE2.12.x で設計されています。

IE6 は min-height プロパティに対応していないため高さが確保されていません。min-height の代用として一般的に IE6 のみに対して height プロパティ(* html (selector) { height: (value) })が用いられますが、本件に対しては以下のスタイル指定によって解決させます。

  • 次のスタイル記述を追加します。
    * html .informationBox,
    * html .informationBox div.body {
      zoom: 1;
    }
    

今回は、任意の高さではなく、一行分が確保されればよいので zoom プロパティを用いて hasLayout 値を true にすることでレイアウト情報を持たせて最低限の高さを確保します(この方法で確保されるボックスの高さは、一行(=文字)の高さに依存します)。

また、レイアウト情報を持ったボックス(div.body)の親要素が hasLayout: false であると、IE6 では 3px ほど順方向(右方向)へボックスのズレが生じ、結果的に .informationBox の右側の枠線がなくなったように見えてしまいます(OpenPNE3 で実装されているドラッグによるボックスの位置移動などのきっかけで再描画されるとズレは直ります)。

.informationBox に対しても zoom プロパティを指定し hasLayout 値を true にすることで子要素 div.body のズレを解消します。

#3 Updated by Mutsumi Imamura about 9 years ago

  • Target version set to OpenPNE 3.6beta1

#4 Updated by Minoru Takai about 9 years ago

note-2 で zoom プロパティのみによる対策を示しましたが、informationBox の中で高さを持たない要素(例えば空のdiv要素)が用いられると informationBox の高さが確保されないため、これを考慮して height プロパティの指定も併用することにします。

この併用は副作用がないと判断しているため、既に zoom プロパティのみによる対応を行ったバージョンに対しても height プロパティを追加する対応を行います。

#5 Updated by Minoru Takai about 9 years ago

  • Status changed from New(新規) to Pending Review(レビュー待ち)
  • % Done changed from 0 to 50

更新履歴 4cbf8b3bb55c951703f5e00def44032c06c58565 で適用されました。

#6 Updated by Minoru Takai about 9 years ago

更新履歴 1a23749e3b9cb8c601697416d3649ed7be2267cc で適用されました。

#7 Updated by Shogo Kawahara about 9 years ago

  • Status changed from Pending Review(レビュー待ち) to Pending Testing(テスト待ち)
  • % Done changed from 50 to 70

#8 Updated by Kousuke Ebihara about 9 years ago

  • Status changed from Pending Testing(テスト待ち) to Fixed(完了)
  • % Done changed from 70 to 100

Also available in: Atom PDF