1

個人サイトで奇妙な問題が発生しています。私はそれを改良していて、いくつかの DIV と SPAN 要素があります。不明な理由で、Firefox は、jQuery 経由で添付したクリック イベントを呼び出していません。コードは Chrome で正常に動作します。以下に URL の例を示します。

http://adnansiddiqi.com/main.html

ボックスのいずれかをクリックすると、たとえばABOUTボックスをクリックすると、ページが表示され、右側に十字Xが表示されます。ホバーするとハンドカーソルが表示され、クリックすると状態がリセットされ、ボックスがうまく表示されます。コードは Chrome(Mac) では完璧に動作しますが、FireFox 11(Mac) では動作しません

個人の URL を共有する条件に違反している場合は申し訳ありませんが、jsFiddle にメイン コードを貼り付けるために最善を尽くしましたが、悲しいことに、必要な jsFiddle コードが CHrome でも適切に実行されないため、実際の URL を提供する以外に選択肢がありませんでした。 . 私は個人的なタッチを与えるすべてのものを削除しましたが. Fiddle のリンクは次のとおりです。

http://jsfiddle.net/RGL7a/20/

私は髪を引っ張っていますが、それに関する賢明な手がかりが見つかりません。

助けてください！

ありがとう

4

2 に答える 2

2

div#bigcontent はクロスを覆い隠しています。おそらく -10% のマージンです。また、ff は代わりにカーソル使用ポインターのハンド値をサポートしていません。

于 2012-04-26T22:47:12.700 に答える
2

まずhand、プロパティの値cursorは古い Microsoft 宣言です。このページのさまざまなブラウザーでのサポートを確認できます: http://www.quirksmode.org/css/cursor.html
このカーソルの手を表示する「新しい」方法は、pointer値を使用することです。したがって、このhand値をpointerに変更すると、少し役立ちます。しかし、すべてではありません。

主な問題である他の問題は、十字をクリックできないことです。その理由は、その上のレイヤーに分割があるためです。この問題を解決するために、absolute positionこの要素に非常に高いz-indexを付けて、クロスが常に上にあることを確認します。
したがって、のスタイリングを.cross次のように変更します。

.cross {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 2.0em;
    float: right;
    color: #B9C0C7;
    cursor: pointer;
    position: absolute;
    top: 25px; //this puts the element right underneath the top bar
    right: 2%; //so that it has the same distance from the right side, as you defined with padding-right
}

これがお役に立てば幸いです:)

于 2012-04-26T23:05:57.513 に答える