Ticket #4112 (closed defect: fixed)

Opened 8 years ago

Last modified 7 years ago

IEでdescriptionBoxのレイアウト崩れ

Reported by: pnetan Assigned to: 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

ticket_4112.png (25.8 kB) - added by kiwa on 03/15/10 12:17:26.
サンプル画像

Change History

07/09/09 19:33:31 changed by imamura623

  • reporter changed from imamura623 to pnetan.

07/09/09 19:33:50 changed by imamura623

  • keywords set to 再現待ち.

07/13/09 13:24:30 changed by kiwa

  • component changed from 指定しない to pne-xhtmlcss.

07/13/09 17:15:37 changed by takai

  • keywords deleted.
  • owner changed from nobody to takai.
  • status changed from new to assigned.

問題を確認しました。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要素以外に同様の影響があることを考えて上記のスタイル記述を丸ごと削除することも考えられますが、逆に削除することによる影響も懸念されます。

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

07/13/09 19:26:30 changed 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 を適用しないようにします。

01/28/10 11:06:27 changed by kiwa

  • keywords set to OpenPNE2.12.18.
  • milestone set to OpenPNE2.14.5.

03/10/10 14:24:10 changed by kiwa

  • owner changed from takai to kiwa.
  • status changed from assigned to new.

ソースに反映させます

03/10/10 14:47:26 changed by kiwa

2.14, trunkは修正しました。

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

03/11/10 14:02:42 changed 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 プロパティ指定をどの要素に指定すべきかについて考察する必要があります。

03/15/10 12:10:47 changed by kiwa

  • keywords changed from OpenPNE2.12.18 to OpenPNE2.12.18 確認中.

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

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

03/15/10 12:17:26 changed by kiwa

  • attachment ticket_4112.png added.

サンプル画像

03/15/10 12:20:46 changed by kiwa

  • description changed.

03/15/10 12:23:55 changed by kiwa

  • description changed.

03/17/10 15:42:00 changed by kawahara

  • keywords changed from OpenPNE2.12.18 確認中 to OpenPNE2.12.18 テスト待ち.

チェックしました

03/17/10 18:35:38 changed by imamura623

  • keywords changed from OpenPNE2.12.18 テスト待ち to OpenPNE2.12.18.
  • status changed from new to closed.
  • resolution set to fixed.

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