input widthをpxで指定するがブラウザによって違ってしまう

Question

$("<input>", {
type:'submit',
name:'hyouji',
value:'表示',
width:'121px'
}).appendTo('.decision_botan');

以前ボタンのサイズの件で質問をさせて頂きました。
そのときはブラウザによってサイズをコントロールしようと
考えておりましたが、そのやり方をやめて通常通りの設定で
やりたいと考えております。

ただ、それをやるとボタンのサイズがブラウザによって違うので
小さすぎたり大きすぎたりしてしまい困っております。

もし動作が考えているのと違うこともあるかともいますので画像も
載せておきたいと思いますのでご確認ください。

http://low-cost-travel.lk6.co/test903.php ／ 新規作成→ＥＤＩＴ

http://low-cost-travel.lk6.co/input_width.png

IE11

google chrom バージョン 43.0.2357.130 m

Answer 1

input要素のwidthでしたら、要素のwidthを指定するより、直接styleで制御したほうが良いのかもしれません。

width:'121px' の場合、appendToされた時に変換されて、style='width:XXXpx'となるようですが、ブラウザでpx数値がまちまちに見受けられます。

width:'121px'をstyle:'width:121px;'などに変えてみてはいかがでしょうか。

$("<input>", { 
            type:'submit', 
        name:'hyouji',
        value:'表示',
        style:'width:121px;'
        }).appendTo('.decision_botan'); 

それでもまだ微妙なズレとかあるかもしれませんが…（＾＾；）

Comments

[退会済みユーザー]

毎回助けていただき誠にありがとうございます。
おかげさまで横幅だけでなく縦幅も解決できました。
本当に本当にありがとうございました。

[noise]

解決に進めたこと、大変うれしく思います。
私のつたない回答で解決に至られるのは、すなわちsato_masato様の尽力の賜物であると存じます。
今後ともご活躍をお祈り申し上げます。

ヽ(*´∀｀)ﾉ お互い頑張りましょ～♪