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

Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#2687 closed defect (fixed)

IEで日記コメント投稿者の表示がずれる

Reported by: imamura623 Owned by: nakasone
Priority: major Milestone: OpenPNE2.12.3
Component: pne-xhtmlcss Version: 2.12.x & 2.14.x
Keywords: OpenPNE2.13.2 Cc:

Description (last modified by kudo)

■現象

日記コメント(fh_diary)と日記一覧(fh_diary_list)の名前部分の表示位置が上下にずれる。

■原因

レンダリングのタイミングで position: relative が指定されている .commentList dd div.title の表示位置がずれる。

■修正内容

日記コメント(fh_diary)と日記一覧(fh_diary_list)の名前部分の表示位置がずれないようにする。

■関連情報

元のDescription

http://sns.openpne.jp/?m=pc&a=page_fh_diary&target_c_diary_id=17423 より転記

ユーザーさんから報告がありました
OS:Vista、ブラウザIE7.0
この組み合わせで日記の最終コメント投稿者の表示がずれます。
再現できましたのでバグとして報告させてもらいます。

(追記)
報告をくれたユーザーさんによると他のSNSでも見られる現象のようです

Change History (19)

comment:1 Changed 11 years ago by kiwa

Component: 指定しないpne-xhtmlcss

XHTML+CSS化チームに検証おねがいしたいです。

comment:2 Changed 11 years ago by takai

Owner: changed from nobody to takai
Status: newassigned

comment:3 Changed 11 years ago by takai

検証しました。

私が検証した限りでは、偶発的に生じるブラウザの不具合のように思います。 性質が異なるかもしれませんが、Opera 戻るときに不具合?と同類の問題かと思われます。

ブラウザ側の不具合と考えられるので、OpenPNEのソースコード(CSS)を修正すべきとは言い切れません。

症状

記事のコメントで示されている画像のように、日記コメントの名前部分(.commentList dd div.title)が上にずれる。

発生条件

WinXP IE7 でしか確認できていない。

私が検証した限りでは低確率なので再現が難しい。

原因

恐らく、レンダリングのタイミングで position: relative が指定されている .commentList dd div.title の表示位置がずれる。

対処

fh_diaryで頻繁に起こる問題であれば、以下のような対処をする。

「(全員に公開)」などの公開レベルのテキストを右寄せにするために .commentList dd div.title に position: relative を指定しているが、fh_diaryでは公開レベルを表示しないため指定する必要が無い。

#pc_page_fh_diary .commentList dd div.title {
        position: static;
}

を適用させる。

考察

  • fh_diary で頻繁に生じるのか?
  • 同じパーツである fh_diary_list では生じないのか?

fh_diary だけであれば直接的な原因究明はできていないものの、上記の対処でよいと考えられる。

もし fh_diary_list(公開レベルのテキストがある場合) でも問題が生じ、問題が生じないように対処を講じる必要があればCSSを見直す必要がある。

comment:4 Changed 11 years ago by ogawa

こちらの日記でつかもとさんから同様の報告をいただいています。

http://sns.openpne.jp/?m=pc&a=page_fh_diary&target_c_diary_id=17964

  • 直前の画像の縦幅に応じて(?)、上にずれたり、下にずれたりする
  • 画像が既にブラウザにキャッシュされていると起こらない

comment:5 Changed 11 years ago by takai

  • fh_diary で頻繁に生じるのか?→発生頻度は、極希というほど低くはない
  • 同じパーツである fh_diary_list では生じないのか?→生じる

comment:3の対処は本質的な解決になっていないので有効ではありません。

つかもとさんの報告を受け再調査を試みましたが、問題をほぼ確実に発生させることができませんでした。

画像が影響しているらしいことを指摘いただいたため数回再現することができましたが、キャッシュを消して読み込みなおして開いた場合でも、問題を高頻度で発生させることができませんでした。

問題を意図的に発生させることができない限りデバッグができない(対処を施しても問題が解消できたか判断できない)ため、問題を発生させるための条件を調査しています。

comment:6 Changed 11 years ago by ogawa

Priority: minormajor
Summary: VIsta/IE7で日記コメント投稿者の表示がずれるIEで日記コメント投稿者の表示がずれる

この現象ですが報告を多数いただいているので優先度を上げてブラウザの不具合であってもこれを回避する策を考えたいです。

comment:7 Changed 11 years ago by takai

commentList の dl要素内、div.titleボックスについて。

fh_diary_list 【公開範囲(div.public)があるページ】
<div class="title">
<p class="heading">日記のタイトル</p>
<p class="public">(全員に公開)</p>
</div>
c_event_list, c_topic_list, fh_diary(コメント)など 【div.headingのみのページ】
<div class="title">
<p class="heading"><a href="./">トピックタイトル</a></p>
</div>

<div class="title">
<p class="heading"><strong>1</strong>: <a href="./">OpenPNE君</a></p>
</div>

現在は、次のような指定(関係ない指定は省略する)を行っています。

div.title {
	zoom: 1;               /* IEの独自プロパティ値の設定 */
	position: relative;    /* div.titleを子ボックスの位置の基準に */
}
p.heading {
	margin-right: 10.5em;  /* (マイフレンドまで公開)という文字列の長さ */
}
p.public {
	position: absolute;    /* div.titleを基準に配置 */
	top: 0; right: 0;      /* p.publicボックスの右上を基準の右上に合わせる */
}

div.titleボックスの中に p.headingボックスがあり、p.publicボックスが右(右上)揃えで浮いている状態です。 p.headingボックスの文字列が長いときに、p.publicボックスのテキスト(最長が『(マイフレンドまで公開)』)と重ならないようにmarginを指定しています。

p.publicボックスを右揃えにすることを考えると上記のようなpositionで配置する方法が思い浮かぶのですが、IEで本件のバグが生じてしまいます。 また、p.publicボックスがない場合にも、p.headingボックスが途中で折り返されてしまっています。

問題の解消が見込める次の方法で対応します。

div.title { }
p.heading { }

(上のように)公開範囲がない(p.publicボックスがない)commentListのページは特に何もしない。

#pc_page_fh_diary_list .commentList dd div.title {
	zoom: 1;                         /* IEでのClearfix */
	overflow: hidden;                /* モダンブラウザでのClearfix */
	overflow: -moz-scrollbars-none;  /* NetscapeでのClearfix */
}
#pc_page_fh_diary_list .commentList dd div.title p.heading {
	float: left;
	width: 66%;  /* 100% - 下の値 - 1% :: 合計を100%にすると何かで崩れうる */
}
#pc_page_fh_diary_list .commentList dd div.title p.public {
	float: right;
	width: 33%;  /* %指定で(マイフレンドまで公開)が入りそうな数値 */
	text-align: right;
}

公開範囲があるページ(fh_diary_list)だけ、ダブルフロートで p.public の配置を行う。

comment:8 Changed 11 years ago by takai

  • (positionを用いていない)ダブルフロート型なので不具合は解消されると思います。
    • p.publicの幅をem指定できない(%指定でないと計算ができない)ので、文字サイズによって公開範囲の文字列が折り返されます。
      • 一方で、p.headingの領域は常に66%確保されます。

comment:9 Changed 11 years ago by takai

Keywords: 確認中 added; 再現待ち removed

Keywords "再現待ち" を外します。

comment:10 Changed 11 years ago by nakasone

Owner: changed from takai to nakasone
Status: assignednew

やります。

comment:11 Changed 11 years ago by nakasone

以下のリビジョンで修正しました。ご確認ください。

comment:12 Changed 11 years ago by nakasone

以下のリビジョンで、CSSの記述ミスと、削除すべきスタイルが残ってしまっていたのを修正しました。

comment:13 Changed 11 years ago by kiwa

Keywords: OpenPNE2.13.2 added
Milestone: OpenPNE2.12.3

comment:14 Changed 11 years ago by kiwa

Keywords: 差し戻し added; 確認中 removed

descriptionを wiki:pne-guidelines のフォーマットに合わせてください。

comment:15 Changed 11 years ago by nakasone

Description: modified (diff)
Keywords: 確認中 added; 差し戻し removed

comment:16 Changed 11 years ago by nakasone

Description: modified (diff)

comment:17 Changed 11 years ago by ebihara

Keywords: テスト待ち added; 確認中 removed

comment:18 Changed 11 years ago by kiwa

Keywords: テスト待ち removed
Resolution: fixed
Status: newclosed

以下のブラウザで確認したところ、問題ありませんでした。

確認ブラウザ

  • !InternetExplorer6
  • !InternetExplorer7
  • Firefox1.5
  • Safari3
  • Opera9

comment:19 Changed 10 years ago by kudo

Description: modified (diff)
Note: See TracTickets for help on using tickets.