対応ブラウザを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>