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

[imamura623]

■現象

日記コメント（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でも見られる現象のようです

[kiwa]

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

[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を見直す必要がある。

[ogawa]

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

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

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

[takai]

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

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

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

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

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

[ogawa]

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

[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 の配置を行う。

[takai]

• comment:7 の内容で修正したCSS r7897

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

[takai]

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

[nakasone]

やります。

[nakasone]

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

• 2.12.x - r7916
• trunk - r7917

[nakasone]

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

• trunk - r7923,r7924

[kiwa]

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

[kiwa]

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

確認ブラウザ

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