タイトルの通りなのですが、ページ内のアンカーリンクを使用すると親要素のマージンが無効になってしまい困っています。(contents以下の要素が左に寄ってしまいます)
ページとしては左側に固定幅ナビゲーション、右側に可変幅コンテンツの2カラムデザインです。
初歩的な質問で恐縮ですが、ご教授願えればと思います。
lang
1#container { 2 width: 100%; 3 height: 100%; 4} 5#container #contents { 6 width: 100%; 7 height: 100%; 8 margin-left: 140px; 9 background: rgba(0, 0, 0, 0) url(images/image.jpg) no-repeat fixed center center/ cover; 10 float: left; 11} 12#container #contents:after { 13 content: ""; 14 clear: both; 15 display: block; 16} 17#container #contents #title { 18 width: 100%; 19 height: 100%; 20 min-height: 1080px; 21 22} 23#container #contents #title .titlelogo { 24 top: 30%; 25 left: 50%; 26 position: absolute; 27} 28#container #contents #title #rect { 29 margin: 100px auto 0; 30 position: absolute; 31 top: 80%; 32 left: 51.5%; 33} 34・ 35・ 36・ 37以下子要素が続きます。 38 39/*--ナビゲーション--*/ 40#pageNav { 41 width: 120px; 42 margin: 0; 43 padding: 0 0 0 20px; 44 height: 100%; 45 background: #fff; 46 position: fixed; 47 float: left; 48} 49#pageNav:after { 50 clear: both; 51 display: block; 52 content: ""; 53} 54#pageNav li { 55 margin: 0; 56 top: 40%; 57 width: 100%; 58 position: relative; 59} 60#pageNav li a { 61 display: inline-block; 62 width: 80px; 63 line-height: 40px; 64 text-decoration: none; 65 text-align: right; 66 } 67#pageNav li a img { 68 margin: 0 0 5px 0; 69} 70 71
無効になってしまうのは
#container #contents 内のmargin-leftです。
よろしくお願いいたします。
追記
検証したところ、clrome、Operaでは起こらずIEとFireFoxで起こる現象でした。
レンダリングエンジンンの問題なのでしょうか……。