対応ブラウザをIEからChromeに変更する時の注意点その２(size 属性)

対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。

発生問題点

input type text を size 属性でサイズを指定した場合、IEとChromeで違いが発生する(ブラウザにより size 属性の解釈が異なる)

環境

OSはWindows10
- バージョン：1909(OS ビルド 18363,1256)
Microsoft Internet Explorer
- バージョン：11.1198.18362.0
Google Chrome
- バージョン：87.0.4280.141(Official Build) (64ビット)

解決方法

size 属性の値を調整する。
又は、size 属性は使用せずに

<input type="text" style="width:300px;">

のようにwidthをピクセル指定する。

size 属性で指定した場合とwidthをピクセル指定にした場合の画面イメージ

IEでの表示
Chromeでの表示

※size 属性で指定するとIEとChromeでtextの幅が異なるが、widthをピクセル指定するとIEでもChromeでも同様の表示となる。

使用ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inputタグのsize属性とwidth</title>
</head>
<style>
body {
  margin: 0;
  padding: 0;
}
th {
  width: 150px;
}
input {
  background:#CCCCCC;
}
</style>
<body>
<form action="#" method="post" id="customerIpt">
<table>
<tr><th>size属性：50</th><td><input type="text" name="txt1" size="50" value="１２３４５６７８９０１２３４５６７８９０１２３"></td></tr>
<tr><th>width：300px</th><td><input type="text" name="txt1" style="width: 300px;" value="１２３４５６７８９０１２３４５６７８９０１２"></td></tr>
</table>
</form>
</body>
</html>