今天在做米扑理财（https://blog.mimvp.com/fund）网页时，需要修改<input type="submit" >的宽度、高度。

发现如果直接这样添加 <input type="submit" style="width: 80px; height: 30px;">  submit的宽高并不会发生变化。

上网查了很多资料，验证的结果如下：

1）在Mac和所有的苹果设备上，如果直接设置 <input type="submit" style="width: 80px; height: 30px;"> 的话，submit的宽高并不会发生变化。

2）在Firebox上面是正常的，包含Mac上运行的Firefox上都是正常

3）在Mac上的Chrome和Safari，按钮的宽高没有生效，不正常

解决办法：

后来查询大量资料，发现只要加上一行代码，就可以成功修改submit按钮的宽高，

那就是增加与 submit 按钮边框有关的属性，来间接使边框的宽高生效，

例如（任选之一或组合均可）：

添加按钮的背景颜色 background-color: #ccc;          成功

添加按钮的边框圆角 border-radius: 5px;          成功

添加按钮的边框为空 background: none;           成功

添加按钮的边框外型 outline-style: auto;           失败

添加按钮的字体大小 font-size: 18px;                失败

成功的CSS样式如下：

input[type=submit]{
    width:80px; 
    height: 30px; 
    line-height: 30px; 
    
    background-color: #ccc; 
    border-radius: 5px;
}

应用实例如下：

<input type='submit' value='查 询' 
style="font-size: 18px; width:80px; height: 30px; line-height: 30px; 
background-color: #ccc; border-radius: 5px;" />

效果图如下：

米扑理财网页：https://blog.mimvp.com/fund

参考推荐：

CSS3 box-sizing 属性

HTML CSS 知识分类总结

HTML CSS 学习笔记整理

HTML CSS 块级标签的用法总结

常用的HTML标签和属性解释

米扑科技公司的代码命名规范

px、em、rem 适配移动端字体大小

HTML css、id、name、js 代码命名规范

HTML CSS 字体大小 pt、px、em、rem 用法详解

CSS 自适应多屏大小的 @media 用法详解

PC网站自动适配手机网页的方法技巧

PC端网页自适应手机屏幕大小

JS检测移动端自适应屏幕大小

HTML css、id、name、js 代码命名规范