昨日に引き続きIEかPCか私の頭にバグ連発です。
 全部かもしれません…

 今日はフレームです。
 こういうページを作ったのですが
 フレームページ
 どういうわけか左側に見えるスクロールバー、
 ネスケだと表示されないのです。
 どういじくっても直らないので、仕方なく
 ネスケ専用メニューを作り、フレームページを開いたとき
 一番最初に表示されるページからリンクを貼ったのです。

 …あ、すみません、上のページはそのネスケページでした。

 ↓そしたら何かもうすごいことになってしまって。
 フレーム怪奇現象

 背景の画像が繰り返しというより
 断片化された画面が繰り返されています。
 おまけに前、さらにその前に表示されていた画面が消えずに残り
 重なって表示されています。
 一枚目のキャプチャを見ればわかると思いますが
 背景に黒なんて指定していないです。スタイルシートまで暴走。

 どうしたものかと思いつつ、全く何も思いつかないので
 仕方なくググって見るとこのページに漂着。

 TAG index BBS Q.インラインフレーム内の表示がおかしくなる

 今回私はインラインフレームじゃないんですが
 症状が似ているのでアドバイスを参考にして
 lintのチェッカーに掛けてみる。
 …色々細かいケチはつけられているけれど、一応100点満点。
 じゃあ、なんで…!?

 さらに別の方のアドバイス
 ・インラインフレーム側のファイルを互換モードにする
 ・インラインフレーム側の背景設定をbody要素からhtml要素に変更

 html要素がいじれず昨日から苦労している私にとって
 残された手段はDOCTYPE宣言のみ…!!
 しかしながらフレームのベースになっているHTML文書は
 最初っから互換モードにしてあったりするのです…

 どうしよう、とりあえず子ページの2つのファイルのDOCTYPE宣言を
 いじくってみる??
 祈るような気持ちで互換モードに変更してみる。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

 ↑これを
 ↓これへ
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">


 結果はあっさりと問題解決でした。
 多少文字がでかくなったのはCSSで修正。
 フレームの土台が互換モードで子ページが標準だったのが
 いけなかったのだろうか…
 あまりにあっさり解決してしまったので真相は闇の中です。
 ありがとう、親切な回答者さん…
 突然ですがテキストやらボックスやらあれやらこれやら
 とにかくブツを画面の真ん中に寄せる命令は

 
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;
 を使えばいーじゃんと気付いたメモ。
×

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