IEからEdgeへのマイグレーションをする際にレイアウトはどう変わるのか？今回は、私が調べたことについてメモ程度にまとめていきます。
インプットボックス
text属性 / search属性
IE10からインプットボックス type=”text” にはデフォルトでクリアボタンが表示されるようになっていました。Edgeでは type=”text” だとクリアボタンが表示されません。 ただし、type=”search” にすることでクリアボタンが表示されるようになります。
<input type="text" style="width: 40%;" placeholder="text属性">
<input type="search" style="width: 40%;" placeholder="search属性">IE10とEdgeを比較
size属性
size属性を設定していると、IEとEdgeではインプットボックスの長さが違ってきます。
<input type="text" size="30">IE10とEdgeを比較
password属性
IEとEdgeではアイコンの表示と機能が少し違ってきます。
<input type="password" style="width:50%;" placeholder="passwordを入力してください">IE10とEdgeを比較
IE10の表示
パスワードを表示する時、アイコンを押しておくとパスワードが確認できます。
Edgeの表示
パスワードを表示する時、アイコンを１回押すとパスワードが確認できます。
title属性
title属性でツールチップを表示している場合は、Edgeだとブラウザの設定が反映されます。
<input type="text" style="width:40%; cursor: pointer;" title="title属性です。" placeholder="title属性で「ツールチップ」を表示します" readonly>edge://settings/appearance
Edgeの外観設定でダークを選んだ場合とライトを選んだ場合
IE10とEdgeを比較
IE10の表示
Edgeの表示
入力キャレット
IEでは入力キャレットの色が黒で指定ができないのに対して、Edgeでは入力キャレットの色を指定することができます。
<input type="text" style="caret-color:red;" placeholder="キャレットカラーを指定">また、入力キャレットの色を指定していなければ文字の色と同じ色になります。
<input type="text" style="color:green;" placeholder="文字の色を指定">ここで気をつけておきたいことが、入力チェックのエラーで文字が赤になった場合、IEでは入力キャレットの色が黒のままなのに対してEdgeでは赤になってしまうということ。
IEの表示に合わせる場合は、input や textarea にキャレットカラーを指定しておきましょう！
input, textarea {
caret-color: black; /* 任意の色を指定 */
}IE10とEdgeを比較
IE10の表示
Edgeの表示
テキストエリア
IEでは、入力できないテキストエリアにも入力キャレットが表示されるのに対し、Edgeでは入力できないテキストエリアには入力キャレットが表示されません。
<textarea placeholder="このテキストエリアには入力できません。" rows="4" cols="50" disabled></textarea>入力できないテキストエリアにも入力キャレットを表示するには、Edgeの設定を変更する必要があります。
edge://settings/accessibility からキャレットブラウズをONにします。
変更すると入力できないテキストエリアにも入力キャレットが表示できるようになります。
※キャレットブラウズのON、OFFはショートカットでもできます
ファイルアップロード
IEとEdgeではファイルアップロードの表示が違います。
<input type="file">IE10とEdgeを比較
IE10の表示
Edgeの表示
スクロールバー
IEとEdgeではスクロールバーの表示が違います。
スクロールバーの表示を確認してください。
IE10とEdgeを比較
フォーカス
IEとEdgeではフォーカスの表示が違います。
ダイアログメッセージ
IEとEdgeではダイアログメッセージの表示が違います。
IE10とEdgeを比較
セレクトボックス
IEとEdgeではセレクトボックスの表示が違います。
IE10とEdgeを比較
IE10の表示
Edgeの表示
チェックボックス
IEとEdgeではチェックボックスの表示が違います。
IE10とEdgeを比較
まとめ
IEとEdgeでは見た目に違いがあり、表示を同じにするにはcssを変更する必要があります。
コメント