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()函数就是参考该文章的. 下面 ...
随机推荐
- Unity3D刚体不同力的测试(ForceMode,AddForce,RelativeAddForce)
摘自圣典的一段翻译: ForceAdd a continuous force to the rigidbody, using its mass.添加一个可持续力到刚体,使用它的质量.Accelerat ...
- Atiti. Php Laravel 5.1 环境搭建以及 error 排除
Atiti. Php Laravel 5.1 环境搭建以及 error 排除 1. php_5.6.11_apache2.41 1.1. Httpd.Conf增加以下配置,添加php支持1 1.2. ...
- Atitit.执行cli cmd的原理与调试
Atitit.执行cli cmd的原理与调试 1. /c 与/k1 2. /k 参数,有利于调试1 3. -------code2 4. 打开程序后与openner脱离关系3 5. 返回参数 St ...
- C++使用ADO存取图片
在项目中.我们须要把事故简图上传到总server.以便每一个client都能下载或者查看.在网上找了找,向Server2000存储图片代码比較多,从数据库中读取图片并显示也不少,可是把图片从数据 ...
- python学习之assert语句
assert语句用于代码检测并报警. 语法 assert code... 例子 # -*- coding: utf-8 -*- # assert语句说明 a,b= 1,23 a == 2 assert ...
- iOS直播-基于RTMP的视频推送
iOS直播-基于RTMP的视频推送 所谓的视频推送就是把摄像头和麦克风捕获到视频和音频推送到直播服务器上.我们这里使用推送协议是RTMP协议. 扩展:腾讯直播平台,阿里直播平台,百度直播平台提供均为R ...
- Redis-ha(sentinel)
redis的sendtinel 是用来管理多个redis服务器的 作用 • 监控:监控主从服务器是否运作正常(通过给服务器发送心跳包的方式) • 提醒:当某个Redis服务器出现异常时,可以通过 ...
- ERROR C2676
直接上代码: nl.h #ifndef NL_H #define NL_H #include <iosfwd> namespace ZJ { /** Insert a newline ch ...
- poj2431优先队列
A group of cows grabbed a truck and ventured on an expedition deep into the jungle. Being rather ...
- List、Set、Map集合大杂烩
java集合主要分三种:list.set.map:当中list和set都继承自Collection接口,两者最大差别是set不能包括反复元素 list的经常使用实现类有: ArrayList:大小可变 ...