突然ですがテキストやらボックスやらあれやらこれやら
 とにかくブツを画面の真ん中に寄せる命令は

 
text-align : center;


 です。
 ちなみに上の文字を中央に寄せるためにこう記述してます。

 <div style="text-align:center;">text-align : center;</div>

 書けば書くほど混乱に陥れそうです。
 左寄せはtext-align : left;(デフォルト)
 
右寄せはtext-align : right;


 しかしいくら頑張っても右寄せにしたい部分が左から動かず
 なんでやねん!なんでやねん!と10分ほど悩んで発覚しました。

 text-align : fight;

 根性では右には寄ってくれません。
 バグじゃなかった……orz

 ↑IEやらOperaやらバグが多過ぎて
  まずブラウザのせいにする癖がついた人

 IEのバグといえば、頭を悩ませるのが
 iframeの横スクロールバーですよね…
 いくら余裕を持たせてセットしても何故か出てくるアレ。

 ウチのサイト(このブログじゃないです)も
 小説メニュー部分にインラインフレームを使用しており
 これまではメニューページのスタイルシートに
html {
overflow-x : hidden;
overflow-y : auto;
}

 を指定してしのいでいたわけです。

 しかし、サイトがでかくなると
 外部スタイルシートだけでも10個近くとか
 わけのわからない状況になり
 先日リニューアルした際にそのひとつが行方不明になったことから
 ついに重い腰を上げてスタイルシートを統一することにしたのです。

 …最近また引きこもってるのこういうわけです。
 ウチのお客さんいたらすみません…

 スタイルシートを統一するに当たって、困ったのはhtml要素。
 フレームページには上の指定をしたいのですが
 他のページのスクロールバーが消えると厄介です。

 ×case1
 id指定をしてみる作戦
[html]
<body id="flame">〜〜〜〜〜〜〜〜〜〜
[CSS]
html#flame{
overflow-x : hidden;
overflow-y : auto;
}

 笑わないでくださいって。真剣なんですって。
 当然ですが完全無視されました。

 ×case2
 overflow-y : auto;をoverflow : auto;として神に祈る作戦
 ⇒変化なし。これができてたらみんな悩みませんやね。次。

 ○case3
 overflow-x : hidden;
 強行作戦。
 でもこれを指定しちゃうと他のページが不安だし
 どうせ縦が出ちゃうならもう開き直って↓

 ○case4
 overflow-y: scroll;
 縦スクロールバーを出せの命令。
 これ、結構使われる手ですけれど、改めて考えると変なの…。
 まあ一番変なのはバグ出してるIEですから目には目ということか。
 これで行こう!

 …と、このブログにアップするキャプチャ画像を撮ろうとしたら
 謎の事態が。
 何も指定していない状態のキャプチャが欲しいから
 一旦html要素をさっくり削除すると
 縦も横も不要なスクロールバーが出てこない!?
 overflow-x : hidden;を指定しているときと同じ状態に。
 試しに更新してみたりキャッシュの削除までしてみるけれど
 やっぱり出てこない。何故…?

 この状態からoverflow : auto;を指定してみる。
 おお!アイフレームどころかページ自体に出ていた
 不要の縦スクロールもスッキリ!

 …しかし、なぜ…
 最初にこの指定をしたときは完全無視されたのに。
 でもこれなら他のブラウザでも不自由なく見られます。
 何が起こっているかわからない状態で使ってしまうか
 それとも手堅くoverflow-y: scroll;を使うべきか…

 悩みながら最初の指定をしてみる。
html {
overflow-x: hidden;
overflow-y: auto;
}
 やはりoverflow : auto;と同じ状態のまま。
 もうわけわからんです。
 すべてがうまく行ってしまうと気持ちが悪いのです。
 IEバグっていうよりこのPCか私がバグっているとしか思えません。
 怖いので一旦html要素そのものを削除。
 ページ全体の縦スクロールバーのみ出現。
 iflameはバグなし。
 そもそも何のために悩んでいたかもわからなくなる…

 …というか横スクロールが出てくれないと落ち着かない!!!

 しかしその後も横スクロールのバグは出現せず
 一番無難なこの指定に落ち着きました。
html {
overflow: auto;
}

 もういいや、アップしてバグが出たら何とかしよう。
 別に横スクロールすると魔界につながるってわけでもなし。

 IEユーザのくせに今ひとつこのブラウザはわかりません。
 もしやこの順番で行くとバグが消えるとかいうおまじないでしょうか。
 ポイントはoverflow-y: scroll;を一旦指定してから
 上書きでoverflow: auto;を指定すること!みたいな。

 …すみません、冗談です。

 でも誰か超ヒマだったら試してみてください(笑)

 あ、私が最後に指定したヤツはバグ必至ですので
 お使いになるなら
html {
overflow-x: hidden;
overflow-y: auto;
}
 がよろしいかと思われます。
 しかし小さい画面では切れる可能性があるデザインなら
html {
overflow-y: scroll;
}
 が安全だと思います。

 ++ 追記 ++

 ふと思ったのですが、外部スタイルシートでなく
 ページ内指定で
 overflow-x: hidden;
 を使えばいーじゃんと気付いたメモ。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。