-4

私はウェブサイトを完成させたばかりで、すべてが正常に機能していました (私が思っていたこと) 修正できない巨大なバグを発見するまで:

ナビゲーション BAR (png ファイル) があり、ボタン (単純な DIV 要素) が追加されています。ページが最初に開かれると、すべて問題ありませんが、ページを少しスクロールすると、ボタンが正常に機能しません。

このリンクを確認してください: (ページを少し下にスクロールすると、ボタンが相互作用しなくなっていることがわかります)

http://www.genius-solutions.net/GSIS/index.html

しかし、カーソルをボタンの少し上に移動すると、次のように表示されます。

(HTML - JavaScript)

ここにCSS部分：

#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}

#html, body {
    background:#002a4c;
    overflow:scroll;
    width:1024px;
    height:768px;
    margin: 20px auto; /* center */ padding: 20px;

}

ここにHTML部分があります：

    <body >
    <div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>

       <div id='applet_t'>

            <div id='btn'>
                <div id='btn1'></div>
                <div id='btn2'></div>
                <div id='btn3'></div>
                <div id='btn4'></div>
                <div id='btn5'></div>
                <div id='btn6'></div>
            </div>

    </div>
        <div id='inf'></div>


    </div>

</body>
4

1 に答える 1

1

あなたの問題は、IMOがabsolute要素の配置を非常に不適切に使用していることにあります。ページをスクロールするとすぐに、実際の「ヒット」プレースホルダーの位置がページと共に移動しますが、背景は移動しません。

テスト ケース: ページを少し上に移動すると、実際のボタンの上で「クリック」できるようになります。

要素を絶対配置する正当な理由がない限りstatic、ほとんどの要素で == デフォルトの配置を使用します。

于 2012-11-19T16:35:34.277 に答える