制作したサイトが「IEで挙動しなくて困っています。」というご相談を頂きました。
目次
WordPress4.9.8を使用中です。IEで挙動しなくて困っています。
初めまして。色々検索しましたが解決出来ません。お願いします。
WordPress4.9.8を使用してサイトをオリジナルテーマで作成し公開しました。Mac環境でSafari、Chromeでは問題ありません。
WindowsのIEでのみトップページが表示されたまま動かない、クリック出来ないという状態です。何が問題でしょうか?IEのバージョンは11でもダメでした。。。
マイクロソフトEdgeでは不具合ありません。
WordPressで使用しているプラグイン一覧を画像添付しました。
また特別難しいことはしておらず、jQueryを使用している程度です。
何が原因でしょうか?
それと今後WordPressでサイト制作する際にどのようなIE対策が効果的でしょうか?
やっと完成したと一安心した所に思わぬ問題が出てきて参っています。
よろしくお願い致します。
原因の特定方法
MORIさま
ご相談ありがとうございます!
クリックできない系はposition系のCSSが原因であることが多いとは思います。
こちら(win10環境)で確認した所、Edgeは問題ありませんでしたが、IE11では確かにスクールできるがサイト内の要素をクリックできない状態にありました。
とりあえず、
.page { position: relative; width: 100%; height: auto; }
のposition記述を削除すればリンク等もクリックできるようになりました。試してみてください。(bodyにposition:relativeが効いている状態はあまり見ないのでエラーの元かも知れませんね。)
僕の環境では動作を確認できました。
制作時の注意
オリジナルテーマということで、最初はHTMLから作り始めた感じでしょうか。
そういった場合であればテーマ化する前に一度ブラウザのチェックをしても良かったかもしれませんね。
HTMLで問題が無ければ、とりあえず「WordPress化して問題が生じた」ということが分かります。
プラグインも思わぬ動作をすることがあります。(独自にCSSやJSを読み込んだりします)
プラグインを全部停止or一つずつ停止して様子を見る
これでプラグインに原因があるかどうかが分かります。
JSを切ってみる / CSSを切ってみる
ここまで試すと、HTML / CSS / JS / WPプラグイン どこに原因があるかが見えてくるでしょう。
今回はCSSをいくつか切ってみて(開発者ツールなどで読み込まないようにする)リンクがクリックできるようになったので、あとはbodyやメニュー周りのCSSを無効化して動作を見てみました。
とはいえ僕もたまたま早い段階で原因かな?と思う所を見つけられただけです。JSに原因があったらもっと時間がかかるorちょっと見ただけでは分からなかったと思います。
WordPressに限ったことではなく、エラーがあったら一つずつ可能性を検証して原因と思われる範囲を狭めていくしかないと思います。
参考にして頂ければ幸いです。
positionの記述を削除して問題なく挙動しました!
WordPressのトラブルではなかったのですね・・・。あまりに初歩的なミスでお恥ずかしい限りです。
問題箇所を見つけて頂きありがとうございました。
初心者なので今後は不具合の見つけ方なども勉強して行きたいと思います!
また、WordPress実装前に各ブラウザで確認することも肝に命じます。
速やかなご返答、本当にありがとうございました。今夜はぐっすり眠れそうです。笑
また、何かあればよろしくお願いします!
>MORIさま
コメントありがとうございます!
解決したようでなによりです。たまたま見つけられただけですが^^;
不具合が出ると焦りますよね!
またなにかあればご連絡ください!
デザイン等、素敵だと思いました!