ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#3771 closed defect (fixed)

IEにてヘッダーメニューのマウスオーバー領域がおかしい

Reported by: imamura623 Owned by: takai
Priority: minor Milestone:
Component: 指定しない Version:
Keywords: 公式SNS Cc:

Description

http://sns.openpne.jp/?m=pc&a=page_fh_diary&target_c_diary_id=20160より転機

最新日記や、ランキング、設定変更のマウスオーバーの領域おかしいのは気のせい?
ちなみにIE7です。

文字上だとクリックできないような・・・

ちょっと下をクリックすれば問題ないですが・・・ww 

Change History (7)

comment:1 Changed 11 years ago by imamura623

Keywords: 再現待ち removed

再現テスト実施しました。

■現象

マイホームや最新日記等のボタンが、IEだと文字部分より少し下でないと押せない。

■発生バージョン

OpenPNE.jp公式サイト
(ノーマルのOpenPNEでは発生しなかったのでスキン、CSS等の問題か?)

■再現手順

マイホームボタン等の上にマウスカーソルを持っていく

■環境

  • windows XP SP3
  • IE7

■関連情報

comment:2 Changed 11 years ago by imamura623

Version: 2.12.x

comment:3 Changed 11 years ago by takai

Owner: changed from nobody to takai
Status: newassigned
Summary: IE7にてヘッダーメニューのマウスオーバー領域がおかしいIEにてヘッダーメニューのマウスオーバー領域がおかしい

IE7のみの問題でなく、少なくともIE6~8共通の問題です。

comment:4 Changed 11 years ago by takai

検証しました。

IEのz-indexに関する実装不備が原因です。

<boxX>
  <boxA></boxA>
</boxX>
<boxY>
  <boxB></boxB>
</boxY>
  • 各々のボックスがこのような関係にあり、boxAとboxBがpositionプロパティ値がstaticでない要素のときboxAとboxBのどちらが前面にくるかは、boxAとboxBのz-index値のみに依存します。
  • z-index値が同じ、またはpositionプロパティ値がstaticの要素(通常の要素)であった場合は、HTMLソース上でより後に記述されているものが前面となります。
  • IEでは前半の定義に反して、boxAとboxBの先祖要素から重なりが評価されてしまい、boxYの方がboxXよりも前面となり、その子孫であるboxAとboxBの前面,背面を指定することができません。

今回の問題は、IEにおいてboxAに相当するメニュー(#globalNav ul)の前面にboxYが配置されているために、クリックできる領域が削られていることが原因です。

  • boxXに相当する #globalNav を前面にする
  • boxYに相当する #topBanner を非表示にする

これらのいずれかの方法で問題を解消できます。

前者の方法は、IEでも重なりが想定どおりになるように、

#topBanner {
	z-index: 1;/*グローバルナビよりも下層に配置*/
}

というスタイル記述部分に、

#globalNav {
	z-index: 2;
}
#topBanner {
	z-index: 1;/*グローバルナビよりも下層に配置*/
}

となるように指定を追加します。position: absoluteが指定されているので z-index は両要素とも有効です。

後者の方法は、利用していないと思われる #topBanner ボックスを非表示にするため、

#topBanner {
	z-index: 1;/*グローバルナビよりも下層に配置*/
}

という部分を

#topBanner {
	display: none;
}

とします。 visibility: hidden; でも同じ効果が得られます。

どちらの方法が好ましいか、あるいはよりよい方法について議論するとなるとデザインをカスタマイズした際の設計に関わるので、これについては判断を任せます。

comment:5 in reply to:  3 Changed 11 years ago by takai

Replying to takai:

IE7のみの問題でなく、少なくともIE6~8共通の問題です。

訂正します。IE8では生じない問題でした。

※IETesterを利用してIE8を確認したつもりでしたが、IE8として機能しておらずIE7相当の結果を示していました。

comment:6 Changed 11 years ago by takai

Resolution: fixed
Status: assignedclosed

修正しました。

  • 公式SNSのカスタムCSSを修正しました
    • #topBanner { display: none; } を記述しました

この修正による副作用はないと思われます。

comment:7 Changed 11 years ago by kiwa

Keywords: 公式SNS added
Version: 2.12.x
Note: See TracTickets for help on using tickets.