一か月前にweb制作を始めたド素人の個人用メモに過ぎないので、分かりやすい説明を求めている方は申し訳ないが他の方のまとめられているのをお勧めします。
IE以外のブラウザ（firefox,chrome,opera）でリンクが機能しなかった
上部に横一列のナビゲーションを設置していた課題作品のwebサイトで。基本的にどのページにも設置していたナビゲーションだったが、あるページでナビゲーションが機能しなくなった。
ロールオーバーを設定していたのだが、アンカーに触れてもピクリともしない。
クリックしてもなんの反応もない。しかしナビゲーションは確かに表示されている。
アレ？ と思いXHTMLを見てみるが、ほかのページと代わりはない。
そりゃそうだ。共通するナビゲーション部分のソースはコピペして使っているのだから。
いやしかし見落としているだけで、余計なの混ざっちゃってるのかもしれない、と一応、コンテンツ部分だけ抜き出して、もう一度他のページからソースをコピペしなおしてみる。
おや？ リンクが反応した。クリックできる。
やはり何かまじっちゃってたのか…と思いながら、コンテンツ部分用の外部CSSを問題のページ専用のものに付け替えた。
すると、リンクが再び反応しなくなった。
エエエ、とがっくりきながら、しかしこれは前進だ。
問題は外部CSSだったのだ。
今回のサイトはreset.css （リセット用）
base.css （共通している要素（headやfooter）のデザイン）（問題の上部ナビゲーションの設定はここでしていた。）
ページ名.css （各コンテンツエリアのデザインをページごとに分けて作っていた）
の三段構えで作っていた。
件のクリックしなくなった問題は、一番下のページ名.cssを付け替えた時点で起こった。
ということはこのページ名.cssに何か問題があるのだ。
というわけであれやこれやと検証した結果……
positionを設定してある要素同士の重なりが問題だったみたいだ。
ページ全体をposition:relativeで中央寄せし、子要素ナビゲーションにはposition:absoluteでbase.cssに、同じく子要素のメインコンテンツにはposition:relativeでページ名.cssにそれぞれ位置指定していた。
しかしこれは他のページも同じだしな…と、他のページのページ名.cssを引っ張り出して見比べてみると……
*ID名などは仮
問題のページCSS
#maincontents｛
position:relative;
margin-left:auto;
margin-right:auto;
padding-top:85px;
｝
-------------------------------------
他のページCSS
#maincontents｛
position:relative;
margin-left:auto;
margin-right:auto;
top:85px;
｝
-------------------------------------
おや？
どうやらメインコンテンツの上部の余白の稼ぎ方が違ったらしい。
問題のページはpaddingを上に伸ばしているので実際は見えている状態だったが、上部ナビゲーションの上にメインコンテンツ領域がかぶさった状態だったらしい。
他のページはpositionのtopで上から85ｐｘのところからこの領域、という指定をしていたので上部ナビゲーションとは重なっていない。
なるほどなるほど。
レイヤーみたいに重なっちゃってるんだな……うん？ なんかそんな話授業のどこかで聞いたな…と汚い殴り書きノートをめくってみる。
あった。positionを初めて習ったとき、あんま使わないよネ～と思っていたposition:fixedの項目の下に、
z-index positionがついたものの重なり順を設定できる。
ex)z-index:10; ←1でもよいが10単位が一般的。数字が大きいほうが上に重なる。
と走り書き。
この10単位が一般的、というのは、
後から新たに挿入する要素がでてきたとき、要素1：z-index:1と要素2：z-index:2と設定してしまうと要素2のz-index:を3にしてから新要素：z-index:2などと設定しなくてはならない。
しかしもともとz-indexを10と20で設定しておけば間に挿入する新要素のz-indexは11でも15でも19でもいいのだ。
つまり、元の要素のz-indexをいじる手間が省ける。
しかも要素1のさらに下層にも挿入するのも簡単にできる。
ということらしい。
少し脱線したが、とりあえずbase.cssの上部ナビゲーション部分にz-index:100を設定してみた。
（100の理由はとにかく上！ 上に来い！！ という気負いと、もし他の要素にz-index指定があっても100は上回れまい、という微妙にビビりな理由から。他要素にz-indexが登場していなければ10で十分かと思われます）
きた！
リンクが反応した！ ヤッターと小躍りして家族に擦り寄ったら、事情を知らない相手から「あぁそうよかったね」とドライな返事。いや、返事してくれただけでありがたい。よかったよほんと。
-----------------------------------------------------------
結果…
positionで指定した要素同士の領域が被ると、下層になってしまった要素のアンカーリンクはたとえ見えていてもクリックもロールオーバーもできない（まさに触れられない）
ということだったみたいだった。
しかも厄介なことに、IEではクリックできる。
とりあえず自分で確認したブラウザopera,firefox,chromeではクリックできなかった。
対処法は重なった要素のどちらか、あるいは全てにz-indexで重なり順を調整すること。
リンクを機能させたいなら一番上にその要素を持ってくる。
まだブラウザ毎の差異について軽く話を聞いていただけで、アァ～デフォルトのマージン量が違うんだナ～くらいにしか思っていなかったので、今回のことで身に染みた。今回はIEで通って、それ以外だと機能しないパターンだったが、世間ではその逆で、IEにだけ効かない！！ ということが多々あるらしい。
IE嫌われてんだなあーとかるーく思っていたがこういうことを毎度IEだけで起こったら確かに嫌やな…と実感。
とりあえず、今回のページは特に重なりを必要とするレイアウトでもなかったので、結局z-indexを使わず、padding-topをpositionのtopに差し替えて終了。
うんうん言いながらいろいろ検証してみてよかった。こういうアクシデント（ていうほどでもないんだろうけど）対処って勉強になるなあと。
さ、課題にもどるのだ……。
0 件のコメント:
コメントを投稿