 |
IEで影が残ってしまう |
影が残ってしまうというご指摘を頂きまして確認を行なったところ、
IEでメニューが閉じる際、以下のような影が残る場合がありました。
問題の発生するページ
https://aimix.jp/smoothnavi_old.html
影が残ってしまったブラウザ
・ IE 8
問題の無かったブラウザ
・ Firefox 3
・ Opera 9
・ Google Chrome 3
| |
回避方法1（スクリプトを修正する） |
このページのサンプルスライドメニューはスクリプトを修正して回避したものです。
テキストエディタで ddsmoothmenu.js を開いて以下の行を修正します。
※ 幅の問題で2行になっていると思いますが、実際は1行です。
※ 戻せるように、元のスクリプトを別にコピーして保存しておくなどして下さい。
修正箇所(1)マウスが上に来た際の処理の一部
修正前 （94行目付近）
this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
修正後 （赤の文字列を追加）
this.$shadow.css({'visibility':'visible',overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px',
top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
修正箇所(2)マウスが外れた場合の処理の一部
修正前 （105行目付近）
this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
修正後 （赤の文字列を追加）
this.$shadow.css({'visibility':'hidden',overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime);
備考
マウスが乗った時に visibilityをvisibleに、外れた時にhiddenにして影のコンテナを非表示にしています。
| |
回避方法2（DOCTYPEを変更する） |
サンプル （以下のページはDOCTYPEを変更して回避しています）
https://aimix.jp/smoothnavipre.html
DOCTYPEがビルダー標準の、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
もしくはDOCTYPEを出力していない場合にIEで影が残ってしまう場合があるようです。
スクリプトを修正せず、DOCTYPEの変更で回避する場合は、
以下のようなDOCTYPEを指定して保存します。
これ以外でも結構ですが、今回はビルダーから選択できる以下のものを指定しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
ビルダーの操作で出力するDOCTYPEを変更する場合、
1.
メニューの「ツール」→「オプション」からファイルタブをクリックします。
2.
「DOCTYPEを出力する」の項目で、以下の項目を選択します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
3.
メニューの「ファイル」から「上書き保存」を選択すると適用されます。
注意事項
DOCTYPEを変更すると、ページ内容によってはレイアウトが崩れる場合があります。
例えばこのページの場合、表が中央揃えになっていますが、表内のセルまで中央揃えに
なってしまう等です。
この場合は個別に左揃えなどを指定する必要があります。
元に戻す場合は上記手順中のDOCTYPEの選択で、以下のものを指定し、
ファイルを上書き保存します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
