Opened 14 years ago
Closed 13 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 )
■概要
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)
Change History (15)
comment:1 Changed 14 years ago by
Reporter: | changed from imamura623 to imamura623 |
---|
comment:2 Changed 14 years ago by
Keywords: | 再現待ち added |
---|
comment:3 Changed 14 years ago by
Component: | 指定しない → pne-xhtmlcss |
---|
comment:4 Changed 14 years ago by
Keywords: | 再現待ち removed |
---|---|
Owner: | changed from nobody to takai |
Status: | new → assigned |
comment:5 Changed 14 years ago by
更なる調査結果を示します。
まず、調査していた環境に不具合があり、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 13 years ago by
Keywords: | OpenPNE2.12.18 added |
---|---|
Milestone: | → OpenPNE2.14.5 |
comment:7 Changed 13 years ago by
Owner: | changed from takai to kiwa |
---|---|
Status: | assigned → new |
ソースに反映させます
comment:8 Changed 13 years ago by
comment:9 Changed 13 years ago by
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 13 years ago by
Keywords: | 確認中 added |
---|
comment:11 Changed 13 years ago by
Description: | modified (diff) |
---|
comment:12 Changed 13 years ago by
Description: | modified (diff) |
---|
comment:14 Changed 13 years ago by
Keywords: | テスト待ち removed |
---|---|
Resolution: | → fixed |
Status: | new → closed |
表示確認しました。問題ありません。
問題を確認しました。2.12でのXHTML化における、あるスタイルの一括が原因です。
この問題の原因は、崩れるブラウザの実装に因ります。私がCSSの仕様を厳密に理解していないのでIEの実装不備と言い切れません。
具体的には、任意の要素が長い英単語などでoverflowするのを防ぐという意図で、上記のようなスタイルを記述していました。
今回の問題は、p要素への overflow: hidden 指定を外す(上記から、セレクタ p を外す)と解消できます。
まだ本質的な原因を追究できていないので、この問題がなぜ起こるのか(ブラウザのバグか、仕様上あり得る妥当な挙動なのか)について言及できません。
p要素以外に同様の影響があることを考えて上記のスタイル記述を丸ごと削除することも考えられますが、逆に削除することによる影響も懸念されます。
この問題に関して更に調査を進めてより本質的な解決策を示したいと思います。