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

Opened 11 years ago

Closed 11 years ago

#3856 closed defect (fixed)

画面の解像度(幅)が小さいとき画面が途中で切れる

Reported by: ShogoKawahara Owned by: takai
Priority: minor Milestone: OpenPNE3.0.5
Component: core Version: 3.0.x
Keywords: Cc:

Description (last modified by ShogoKawahara)

画面の解像度(幅)が小さいときに途中で切れます。

以下の環境で再現しました

  • Firefox3.0.8
  • Safari3.2.2

Attachments (1)

3856.png (52.7 KB) - added by ShogoKawahara 11 years ago.

Download all attachments as: .zip

Change History (9)

Changed 11 years ago by ShogoKawahara

Attachment: 3856.png added

comment:1 Changed 11 years ago by ShogoKawahara

Description: modified (diff)

comment:2 Changed 11 years ago by ShogoKawahara

Description: modified (diff)

comment:3 Changed 11 years ago by ShogoKawahara

Description: modified (diff)

comment:4 Changed 11 years ago by takai

CSSの問題です。

原因

  • 横スクロールバーが出現する条件
    • ウィンドウ(表示領域)幅よりもコンテンツ幅の方が大きいとき
    • 具体的には、ヘッダー部(id="HeaderContainer")が width: 950px と指定されているので、ウィンドウ幅がそれ未満になったとき
  • 横スクロールバーをスクロールしたのに、切れてしまう理由
    • 子孫要素の最大幅を見た結果、body要素(html要素)の幅がウィンドウ幅未満なため
    • 950pxなどと固定幅の部位が、『フロートしているため先祖要素に幅が伝わらない』

症状について

  • (Win)IE6 では問題ないみたいだけど…
    • IE6 の overflow やら float 周りの実装がたまたま良い結果になっただけ
    • CSSの仕様に沿ったモダンブラウザでは、この問題が生じる
  • 途中で切れているのはブラウザの問題ではなく、理想形に対してCSSの指定に不備があるため

解決方法

  • ルート要素(html要素)に近い要素に min-width: 950px を指定する
    • html要素でもbody要素でもよいが、<div id="Container"> に対しての指定( #Container{ min-width: 950px } )が妥当な気がする
  • min-width が有効でないブラウザでかつ、対応ブラウザとなっているのは IE6 のみであると思われるが、IE6は現状のままでもこの問題が生じないようなので気にしないでよいと思われる
    • IE6 にも min-width 相当の指定が必要と判断された際には別途対応します

comment:5 Changed 11 years ago by takai

Owner: changed from nobody to takai
Status: newassigned

comment:6 in reply to:  4 Changed 11 years ago by takai

comment:4

フロートが原因だというのは間違ってました。

  • (コンテンツ幅によって)あるボックスがウィンドウ幅よりも大きいことにより横スクロールバーが出現するとき、他の要素の幅は暗黙的にウィンドウ幅となるようです(スクロールに対して引き伸ばされません)
  • min-width を指定することにより、少なくとも(min-widthで)指定した幅は確保されるので、今回の問題に対応することができます

comment:7 Changed 11 years ago by takai

Keywords: 確認中 added

で対応しました。

#Container { min-width: 950px; }

を追加しました。この修正による副作用(悪影響)は特に無いはずです。

comment:8 Changed 11 years ago by ShogoKawahara

Keywords: 確認中 removed
Resolution: fixed
Status: assignedclosed
Note: See TracTickets for help on using tickets.