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

Opened 9 years ago

Closed 8 years ago

#4112 closed defect (fixed)

IEでdescriptionBoxのレイアウト崩れ

Reported by: imamura623 Owned by: kiwa
Priority: minor Milestone: OpenPNE2.14.5
Component: pne-xhtmlcss Version: 2.12.x & 2.14.x
Keywords: OpenPNE2.12.18 Cc:

Description (last modified by kiwa)

■概要

IE7だとdescriptionBoxのレイアウトが崩れる

サンプル画像

■原因

コメント参照

■修正内容

以下のCSsを追記し、IE7でのレイアウト崩れを回避した。

*:first-child+html p {
	overflow: visible;
}

■関連情報

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

既出でしたらすみません。

最新版2.14で、IEの場合descriptionBoxの下幅が広くなっています。
paddingもとれていないようです。

写真1:IE7.05 写真2:FireFox3.0.11

ver2.14RC1 

Attachments (1)

ticket_4112.png (25.8 KB) - added by kiwa 8 years ago.
サンプル画像

Download all attachments as: .zip

Change History (15)

comment:1 Changed 9 years ago by imamura623

Reporter: changed from imamura623 to imamura623

comment:2 Changed 9 years ago by imamura623

Keywords: 再現待ち added

comment:3 Changed 9 years ago by kiwa

Component: 指定しないpne-xhtmlcss

comment:4 Changed 9 years ago by takai

Keywords: 再現待ち removed
Owner: changed from nobody to takai
Status: newassigned

問題を確認しました。2.12でのXHTML化における、あるスタイルの一括が原因です。

  • 崩れを確認できたのは IE7, IE8 です。
  • IE6 および Firefox, Opera, chrome, Safari では生じないようです。

この問題の原因は、崩れるブラウザの実装に因ります。私がCSSの仕様を厳密に理解していないのでIEの実装不備と言い切れません。

dd div, dt, ul, ol, td, th, p,
h1, h2, h3, h4, h5, h6, .partsHeading,
fieldset, label {
	overflow: hidden;
}

具体的には、任意の要素が長い英単語などでoverflowするのを防ぐという意図で、上記のようなスタイルを記述していました。

今回の問題は、p要素への overflow: hidden 指定を外す(上記から、セレクタ p を外す)と解消できます。

まだ本質的な原因を追究できていないので、この問題がなぜ起こるのか(ブラウザのバグか、仕様上あり得る妥当な挙動なのか)について言及できません。

p要素以外に同様の影響があることを考えて上記のスタイル記述を丸ごと削除することも考えられますが、逆に削除することによる影響も懸念されます。

この問題に関して更に調査を進めてより本質的な解決策を示したいと思います。

comment:5 Changed 9 years ago by takai

更なる調査結果を示します。

まず、調査していた環境に不具合があり、IE6, 7, 8 の環境をきちんと整えられていませんでした。IE8で確認していたつもりでしたがIE7相当の表示結果となっており、IE8での挙動が正しく確認できていませんでした。

崩れを確認できたのは IE7, IE8 です。

と示しましたが、正規のIE8では問題は生じませんでした。

ここまでで『overflow: hidden の記述が原因で IE7 のみで起こる問題』と言えそうですが、この問題は hasLayout 絡みの問題である可能性が高いようです。 overflow: hidden の代わりに、hasLayoutプロパティに(確実に)影響がある他のプロパティ(zoom: 1)を指定したところ、同じ問題が IE7 および IE6 で生じました。

現状のスタイル記述(の意図)と、修正した際の影響を考えて、今回は次のような対応を示します。

dd div, dt, ul, ol, td, th, p,
h1, h2, h3, h4, h5, h6, .partsHeading,
fieldset, label {
	overflow: hidden;
}

を次のように変更する。

dd div, dt, ul, ol, td, th,
h1, h2, h3, h4, h5, h6, .partsHeading,
fieldset, label {
	overflow: hidden;
}
  • p要素をセレクタから外し、p要素に overflow: hidden を適用しないようにします。

comment:6 Changed 8 years ago by kiwa

Keywords: OpenPNE2.12.18 added
Milestone: OpenPNE2.14.5

comment:7 Changed 8 years ago by kiwa

Owner: changed from takai to kiwa
Status: assignednew

ソースに反映させます

comment:8 Changed 8 years ago by kiwa

2.14, trunkは修正しました。

2.12はCSSが上のものとはちがったので、現在調査中です。(そのため確認中にもしません)

comment:9 Changed 8 years ago by takai

2.12では comment:5 に相当する修正は、xhtml_style.php(153~155行目あたり)

p {
	overflow: hidden;
}

を削除することです。

ただし、hasLayout プロパティ値による問題(つまりIE7のみの問題)であるため、

  • 連続した長い英数(記号)文字がはみ出さないように overflow: hidden プロパティを指定している
  • IE では overflow: hidden で隠れるよりも先に word-break プロパティで折り返される

このことを考えると、IE7のみp要素に対して overflow: visible を指定した方がよいかもしれません(前述の修正を行わずに、以下のコードを追記する)。2.12だけでなく2.14に対しても同様のことが言えます。

*:first-child+html p {
	overflow: visible;
}

なお、word-break プロパティは文字列しか折り返さないので、文字サイズが大きい場合や、内容が画像など幅・高さを持っている場合には、内容がボックスをはみ出してしまいます。これを防ぐには、overflow プロパティ指定をどの要素に指定すべきかについて考察する必要があります。

comment:10 Changed 8 years ago by kiwa

Keywords: 確認中 added

以下のリビジョンで comment:8 の変更を取り消しました。

以下のリビジョンで comment:9 の指摘を取り込みました。

Changed 8 years ago by kiwa

Attachment: ticket_4112.png added

サンプル画像

comment:11 Changed 8 years ago by kiwa

Description: modified (diff)

comment:12 Changed 8 years ago by kiwa

Description: modified (diff)

comment:13 Changed 8 years ago by ShogoKawahara

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

チェックしました

comment:14 Changed 8 years ago by imamura623

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

表示確認しました。問題ありません。

Note: See TracTickets for help on using tickets.