ブラウザ対応問題:垂直配置に悩む。
お詫びしておかなければいけないんですが。 MUTTER をCSSに切り替えた結果、IE以外のブラウザに対応できなくなってしまいました。無念。 具体的にどこが問題かというと… FireFox/Operaなどで確認すると、 MUTTERのテキストが長い場合に、 ページフッタの上に被さって伸びて行ってしまう…のです。 IEでこれを見て問題がないのは、 中身の大きさによってブロック要素の高さを勝手に変更してしまうという 柔軟だけどある意味お節介すぎる仕様のせいです。 本来、親要素の高さ指定を具体的にしていなければ、 IE以外のブラウザでも高さを調整してくれるんですが、 MUTTER にはそうしたくない理由がありまして… ていうのは、左側の文章は、 文章が短いときのページ内垂直配置をセンターに持ってきたい、そういう希望があるから。 文章自体は改行を含んでいるし、<div>のブロック要素なので vertical-align(垂直配置。HTMLで言うところのvalignだが、インライン要素にしか使えない) は使えない。 となると残る方向は、テーブルを組むしかない。 出来るだけテーブルは使いたくなかったが、この場合は仕方ない… しかし、ここにも問題があり、テーブルを使って垂直配置する場合には、 セルに対して高さの指定が必要。 コレを指定しないと、セルの高さは内容物の高さになってしまい、 垂直配置どころではなくなる。 そしてコレを指定してしまうと、前述のはみ出し問題が発生するわけである。 うーむむむ… このまま放置するのも良いんだけど、気付いちゃった以上気持ち悪い。なんとかしたい。 方向性としては、4つ。 1) 垂直センター配置を諦める。 2) 文章の行数を計算し、PHPで切り替え 3) overflow:scrollを設定する 4) FireFox 対応を諦める 2) の方法はまだ試していないが、改行(¥n)の数で、文章の行数を割り出し、 そこから実際のテキストのおおよその高さを割り出し、 或る一定以上の高さ(はみ出しが発生する高さ)の時はテーブルの高さを指定しない、 それ未満の時は高さをして垂直に配置する。 出来なくはないが…処理が遅くなりそうで嫌だ。 EntryのBodyだけテキストのみで保存している実現は十分可能だが。 3) のoverflowはセルにスクロールバーを付けるというもの。 デフォルトでは、overflow:visibleの為、はみ出して見えてしまうが、 overflow:scrollにしてやれば、はみ出た分はスクロールバーで調整可能…なんだけど… ちょっと見栄え悪いよね、やっぱり。 ヘッダ、フッタとの整合性がイマイチだし。 正直に言うと、垂直配置を諦めてもいいかなぁ…とも思う。 右メニューが長くなってきてしまって、文章が短いときに テキストがページの下の方へ行きがちだからだ。 ウィンドウサイズが小さいと、アクセス時に読めないこともあるかもしれない。 うーん…そうなんだよなぁ… でもその場合、すかすかのテキスト下を何に利用するか、 というのもなかなか考えどころ… ただただ、『意図のない空白』になってしまうのはちょっと。 むむむ……