Edgeの「IEモード」を、サポートが終了するIE代わりに使う方法
社内に古いInternet Explorer（IE）専用Webページ／アプリが残っていたり、自治体などのIEしか対応していないWebサイトへアクセスが必要であったりするせいで、いまだにIEの利用が強いられている。しかも、IEでは利用できないネットサービスが増えていて、他のWebブラウザと併用せざるを得ず、面倒だ……。 さらに、2022年6月にはブラウザとしてのIEのサポートが終了し、IEが起動できなくなるとのこと。このままでは、IE専用のWebページ／アプリを使い続けられなくなる。かといって、IE以外のブラウザでも利用できるようにサーバ側のシステムを改修するのは到底間に合わない……。 このような場合、Chromiumベースの「Microsoft Edge（以下、Edge）」への移行を検討してみるとよい。「IEモード」という、EdgeのタブでIE専用のWebページ／アプリをシームレスに表示で
JavaScript：「return false;」で「href」を無効化できずに２つウィンドウが開いてしまった原因
オリジナルのTwitterボタンを設置したところ、ウィンドウが２つ開いてしまうことに気が付きました。ちゃんと「return false;」を利用して、「aタグのhref」リンクが開かないようにしていたつもりが、効果がないようでした。かなり特殊だったこの原因を探すのにちょっと苦労したので、メモしておきます。 目次 1. 設置していたタグ2. 設置していたタグの仕組み2.1. return false;3. return false;が機能していない？4. いろいろ試してみた結果4.1. WordPressプラグイン？4.2. www.yahoo.co.jpにしたら大丈夫！4.3. twitterのjavascriptが原因？4.4. 原因のコード5. でもこれどう対策すれば・・・6. 対策6.1. 参考メモ スポンサーリンク 設置していたタグ 設置していたタグを簡単に書くとこんな感じです。
のonclickでreturn falseしてるのにIEだけ画面遷移しちゃう - くろまほうさいきょうでんせつ
<a href="/" onclick="return false;">画面遷移してほしくないリンク</a>↑としているのになぜかIEだけしっかり画面遷移する。 そんなばかな！ と思ったら自分がばかだったメモ。 こういうことでした <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript"> $(function(){ $('#link1').click(function(e){ }); $('#link2').click(function(e){ return true; }); }); </script> <a id="link1" href="/" onclick="return false;">何も起こらない</a> <a id="link2" href=
使用している Web ブラウザが IE (Internet Explorer) かどうか判別する | まくまくJavaScriptノート
JavaScript で IE かどうかを判別する IE 判別関数 (isIe) navigator.userAgent プロパティを参照して、ブラウザのユーザーエージェントを調べることで、使用しているブラウザが IE (Internet Explorer) であるかを判別することができます。 IE の場合、ユーザーエージェント名は MSIE あるいは Trident/ で始まります。 // 使用中のブラウザが IE であるかどうかを判別します。 function isIe() { var ua = navigator.userAgent; return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1; } ただし、navigator.userAgent プロパティの値はブラウザの設定により書き換えられる可能性があることに注意
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
CSSの「:active」はIE(Edge)で重い | Agnist.code
データテーブルなど要素が大量にある画面をIEで開いている時、スクロールが妙に重いので調査したところ、ボタンにかけていた擬似要素「:active」の存在が重くしていると分かりました。 「:active」の中のCSSプロパティではなく、「:active」の擬似要素がCSSに存在するだけで重くなっていました。 しかも最新のEdgeバージョンで。 経緯と状況 下記のデモページをIEで開いてみてください。 デモページ 重さを体感できるようにするため膨大な行のテーブルを overflow:scroll のレイヤーで囲ってますが、中身はどうでもいいです。 クリックしてからすぐスクロールしたり、スクロールバーのツマミからスクロールしようとすると一瞬引っかかると思います。これは「:active」が原因でIE内でCPU使用率が高まっているためです。 下図はIEのDevツールでUIの応答速度を計測したものです。
【CSS】IEのみに適用する、Firefoxのみに適用する、Chromeのみに… at softelメモ
問題 特定のブラウザのみにスタイルシートを適用したいです。 IE10、IE11では条件付きコメントが効かないので別な方法が必要なのですが。 答え それぞれ以下のようにすると可能。 IEのみに適用 @media all and (-ms-high-contrast: none) { /* ここに書く */ span { color:#c00; } } Firefoxのみに適用 @-moz-document url-prefix() { /* ここに書く */ span { color:#0c0; } } Chromeのみに適用 @media screen and (-webkit-min-device-pixel-ratio:0) { /* ここに書く */ span { color:#00c; } } Safariのみに適用 ::-webkit-full-page-media, :futu
【簡単】IE11のキャッシュクリア方法と自動で削除する方法をご紹介！ | Aprico
閲覧したホームページのデータをパソコンの中に一時的に保存する機能のことを「キャッシュ」と呼びます。そしてキャッシュを消去することを「キャッシュクリア」と言います。 キャッシュが残っていれば一度訪れたホームページをまた閲覧する時に素早く表示することが可能になります。しかし、キャッシュが古くなってしまった場合などにホームページを正しく表示できなくなることがあり、その場合にはキャッシュを削除する必要があります。
IEでドキュメントモードの既定値を変更する方法
IEでドキュメントモードの既定値を変更する方法を紹介します。 １．問題点 会社のあるシステムを使っていると、IEで次のようにレイアウトが崩れてしまいました。 具体的には「承認者」の下にあるボタンがテーブルの中に入り込んでしまっています。 原因はブラウザのドキュメントモードらしいので、F12を押下して、開発者モードを表示。 （クリックで拡大） ドキュメントモードの「7」が既定値になっているので、最新の「Edge」を選択。 これでレイアウト崩れが解消しました。 が、このページを正常に表示させるには毎回この操作を行わなければならないのですが、常に「Edge」を既定値にする方法はないでしょうか。 ということで、ドキュメントモードの既定値を変更する方法を紹介します。 ２．ドキュメントモードの既定値を変更する ドキュメントモードの既定値を変更するには、「ツール」→「互換表示設定」をクリック。 「イント
歌うキツネ : Internet Explorerの履歴などを記憶・保存させない
Internet Explorerの履歴などを記憶・保存させない Microsoft Edgeのプライバシー関連の設定をする Microsoftアカウントの検索履歴などを削除・無効にする Googleアカウントの検索履歴などを削除・一時停止する プライバシーとセキュリティーを優先した設定をします。これにより、利便性と表示速度が低下する場合があります。 IE11(デスクトップ版) | IE11(ストアアプリ版) | IE10(デスクトップ版) | IE10(ストアアプリ版) IE9 | IE8 | IE7 | IE6 Internet Explorer 11 (デスクトップ版) 1. ツールボタン _ [インターネット オプション] をクリックする 2. 全般 _ 閲覧の履歴 終了時に閲覧の履歴を削除する: チェックを入れる 3. 全般 _ 閲覧の履歴 _ [削除...] をクリックする (
#IE11 で #CSS グリッドは難しくない | Sler系SEの技術ブログ
今回、この記事でAutoPrefixerは利用しません。 IE11は[x]でrepeatを指定できます minmax()は、IE11で利用できますが、auto-fitとauto-fillは利用できません。 fit-content()も、IE11で利用できませんが代替の手段があります。 グリッドの列/行にminmax(min-content, max-content)を適用し、子要素にmax-width: [value]を設定します。 IE11以外のブラウザでは、fit-contentの代わりにautoを指定しても同じです。 ちなみに、IE11のautoの動きは他のブラウザと異なります。 IE11で他のブラウザのautoを再現しようと試みましたが、minmax(min-content, 1fr)は、横幅がコンテンツの量に対応せず、 minmax(min-content, 100%)、minm
Reactアプリを IE11 で表示すると 「オブジェクトは 'startsWith' プロパティまたはメソッドをサポートしていません。」 が発生する - ＊いしのなかにいる＊
create-react-app で作った ReactアプリをIE11で表示したら画面が真っ白に！ create-react-app で作った Reactアプリ をIE11で表示したら画面が真っ白になりました。 コンソールには以下のエラーが… オブジェクトは 'startsWith' プロパティまたはメソッドをサポートしていません。 Possible Unhandled Promise Rejection (id: 0): TypeError: 未定義または NULL 参照のプロパティ '_currentElement' は取得できません Chromeでしか動作確認をしていなかったのもあれなのですが、開発も終盤にきたタイミングでこれは困る〜。 解決までに半日ほど要してしまったので、次回またハマらないようにメモしておきます。 原因はsetState？？ コンソールと睨めっこしたりデバッグコー
CSSメディアクエリで Internet Explorer 10/11 を指定する (CSS Tips)
CSSのメディアクエリで、Internet Explorer 10, Internet Explorer 11 の場合を指定するコードを紹介します。 概要 CSSで Internet Explorer 10, Internet Explorer 11 の場合に限り、スタイルを変更したい場合があります。ユーザーエージェントを判定してプログラムで出し分けすることもできますが、メディアクエリを利用することで、CSSの記述のみで Internet Explorer 10, Internet Explorer 11 でのスタイルを指定できます。 書式 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { ...(IEで適用する スタイル) }
IE11で「flexbox」「min-height」「aligin-items: center」の組み合わせが効かない時の対処法
ChromeとEdgeでは意図通りに動く。でも、IE11だけ動かない・・・ そんなバグがあって四苦八苦したので対処法をメモ。 どうにかして「Chrome」「Edge」「IE11」の動作を同一にすることが出来ました。 やりたいこと こんな感じ。 div要素の中に文字を均等に真ん中に配置したい。 その時の記述がこんな感じ。 <div class="parent"> <span class="child"> test </span> </div> .parent { display: flex; align-items: center; width: 100%; background-color: green; min-height: 90px; } .child { } flexboxのalign-items: centerで、 高さ指定した親のdiv要素に対してspan要素を中央寄せしていま
flex-directionを指定した時に IE11で表示がおかしくなる | WEB PIXY
CSS3から新たに追加された Flexible Boxはプロパティが豊富で可変レイアウトに柔軟に対応できるのでレスポンシブデザインでの制作には欠かせないものになっています。しかし IEでデバッグをしていた時に flex-directionに関連するバグのようなものに遭遇しました。 IEだけ画像に余分な隙間ができる IE 11では flex-directionに columnや column-reverseを指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしまいます。サンプル画像内にある写真の下のグレーの部分がそれにあたります。 解決方法 解決方法はシンプルで min-heightを利用します。IE 11以外のブラウザでの表示に影響はありません。以下がサンプルのコードです。 <div class="flex"> <p class="flex-inner">L
Laravel MixのIE11対応 - Qiita
LaravelMixのextensionにlaravel-mix-polyfilltというものがあり、簡単に使えたので書いておきます。 laravel-mix-polyfillのインストール npm install laravel-mix-polyfill --save-dev laravel-mix-polyfillを使うための設定 let mix = require('laravel-mix'); require('laravel-mix-polyfill'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .polyfill({ enabled: true, useBuiltIns: "usage", targets: {"firefox": "50"
【lightbox2】IE11 でポップアップを開くとページ上部が表示される問題【jQurey】 - Qiita
最新バージョンの litebox 2.11.1 を利用してライトボックスを実装しました。 IE11 だけポップアップを開くと、画像の位置ではなくページ上部が表示されるバグ？があります。 バージョンを 2.10.0 に落としたところ、IE11 でも正常に動きました。 試してはいませんが、2.11.0 でも正常に動作するかもしれません。 製作者が IE11 には対応しない方針なのか、それともバグなのかわかりません。 バグの可能性があるなら、お強い方は Issue をどうぞです。 追記 Issues を見ると指摘あるので、そのうち修正版がでるかもしれません。 Disable Scrolling scrolls to top when image is clicked. #620 追記 2.10.0 の lightbox.css の html.lb-disable-scrolling には pos
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OS、ブラウザごとのCSSハックなどまとめ - Qiita
Laravel(LaravelMix)でCSS GridをIE11に対応しやすくするAutoprefixerの設定。 – Stella Design
SVGをimgで表示した場合にIEだけサイズが変になる現象を直す - Qiita
