submit按钮修改宽高的坑

　　近些天对h5非常感兴趣，边工作边学习，虽然比较累，但过得很踏实。每天都要学习一点东西，这样才能对得起自己。好了，废话不多说，进入今天的主题。

　　今天遇到了一个非常有趣的东西，就是在修改submit按钮的宽度和高度时的问题。首先附上html代码。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>baidu</title>
 6     <style>
 7         div{
 8             /*width: 980px;*/
 9             height: 300px;
10             text-align: center;
11             /*background-color: red;*/
12         }
13         .blank{
14             height: 50px;
15         }
16         input[type=text]{
17             width: 400px;
18             height: 30px;
19         }
20         input[type=submit]{
21             width: 100px;
22             height: 35px;
23         }
24         
25     </style>
26 </head>
27 <body>
28 <div class="header">
29     <div class="blank"></div>
30     <form action="">
31         <input type="text" />
32         <input type="submit" value="百度一下" class="submit">
33     </form>
34 </div>
35 </body>
36 </html>

　　这样写，从理论上讲是没有问题的，在windows上面运行，submit按钮的高度改变了。但是，在Mac上面，准确来说在所有的苹果设备上面，submit的高度都没有发生变化，这是为什么，说实话，我到现在也不知道啥原因，姑且认为是WebKit的原因吧（我猜的，莫见怪），然后在firebox上面也是正常的。Mac上面chrome和Safari上面按钮的高度没有修改成功，后来Google了一下，发现只要加上一行代码，就可以成功修改submit按钮的高度了，那就是增加submit的背景颜色background-color，不要问我为什么，我也很慌啊。好了，这个坑希望能帮助到某些人，以后遇到其他的问题，还会继续分享。

posted @ 2017-03-17 10:59  照顾一下  阅读(4870)  评论(0)  编辑  收藏  举报