submit按钮修改宽高的坑
近些天对h5非常感兴趣，边工作边学习，虽然比较累，但过得很踏实。每天都要学习一点东西，这样才能对得起自己。好了，废话不多说，进入今天的主题。
今天遇到了一个非常有趣的东西，就是在修改submit按钮的宽度和高度时的问题。首先附上html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
<style>
div{
/*width: 980px;*/
height: 300px;
text-align: center;
/*background-color: red;*/
}
.blank{
height: 50px;
}
input[type=text]{
width: 400px;
height: 30px;
}
input[type=submit]{
width: 100px;
height: 35px;
} </style>
</head>
<body>
<div class="header">
<div class="blank"></div>
<form action="">
<input type="text" />
<input type="submit" value="百度一下" class="submit">
</form>
</div>
</body>
</html>
这样写，从理论上讲是没有问题的，在windows上面运行，submit按钮的高度改变了。但是，在Mac上面，准确来说在所有的苹果设备上面，submit的高度都没有发生变化，这是为什么，说实话，我到现在也不知道啥原因，姑且认为是WebKit的原因吧（我猜的，莫见怪），然后在firebox上面也是正常的。Mac上面chrome和Safari上面按钮的高度没有修改成功，后来Google了一下，发现只要加上一行代码，就可以成功修改submit按钮的高度了，那就是增加submit的背景颜色background-color，不要问我为什么，我也很慌啊。好了，这个坑希望能帮助到某些人，以后遇到其他的问题，还会继续分享。
submit按钮修改宽高的坑的更多相关文章
- canvas动态修改宽高问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:方法一:1 <canvas width="500" height="500&qu ...
- 动态布局--动态修改RelativeLayout宽高的方法
本文实例讲述了Android编程动态修改RelativeLayout宽高的方法.分享给大家供大家参考,具体如下: 我们经常会动态修改RelativeLayout的宽高,这样的代码,比较简单,就是修改R ...
- ios UIWebView加载HTMLStr图文，关于图片宽高设置，webView内容实际高度的踩坑问题
一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...
- 关于PHP HTML <input type="file" name="img"/>上传图片，图片大小，宽高，后缀名。
在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...
- 翻屏类 h5 适配方案：解决宽高自适应难题
表格 图片等 宽度自适应 :width:100%; box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...
- Qt TabWidget QTabBar 宽高设置
/*************************************************************************** * Qt TabWidget QTabBar ...
- iOS学习-压缩图片(改变图片的宽高)
压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...
- BOM，文档宽高及窗口事件小析
(一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...
- NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕）
自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...
随机推荐
- PHP扩展开发及内核应用(未完)
转: https://github.com/walu/phpbook
- TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签
首先来看下实现的效果吧: 最近在项目中实现这个效果的时候.尽管自己磕磕绊绊的实现了,可是知识确实模模糊糊的,今天天气异常的冷,在加上这个知识不太熟练,实在是没有心情进行接下来的计划,干脆借着这个时间, ...
- Atitit.数据操作dsl 的设计 ---linq 方案
Atitit.数据操作dsl 的设计 ---linq 方案 1.1. sql与api方式1 1.2. Linq方案与stream方案的选择,1 1.3. 前缀表达式 vs 中缀表达式1 1.4. 要不 ...
- Atitit. http 代理原理 atiHttpProxy 大木马
Atitit. http 代理原理 atiHttpProxy 大木马 1. 面这张图可以清晰地阐明HttpProxy的实现原理:1 2. 代理服务器用途1 3. 其中流程具体如下:2 4. 设计规 ...
- [elk]logstash grok原理
logstash语法 http://www.ttlsa.com/elk/elk-logstash-configuration-syntax/ https://www.elastic.co/guide/ ...
- jQuery - 获得内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...
- 通过show status 来优化MySQL数据库
1, 查看MySQL服务器配置信息 Java代码 mysql> show variables; 2, 查看MySQL服务器运行的各种状态值 Java代码 mysql> show ...
- 浏览器在线打开pdf
https://www.cnblogs.com/Leo_wl/p/5735001.html#_label0 https://blog.csdn.net/li_cheng_liang/article/d ...
- gitlab仓库服务器搭建
``` curl -sS http://packages.gitlab.cc/install/gitlab-ce/script.rpm.sh | sudo bash sudo yum install ...
- PHP学习笔记（12）分页技术
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...